<template>
  <li>
    <label>
       <input type="checkbox" :checked='todo.done' />
       <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

<script>
// 组件交互相关的代码(数据、方法等等)
export default {
  name: "UserItem",
   props: ["todo"],
   // mounted() {
   //   console.log(this.todo);
   // },
};
</script>

<style scoped>
/* item */
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left; 
  /* 鼠标移到时是一只手的形状 */
  cursor: pointer;
}

li label input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
  cursor: pointer;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
} 

li:last-child {
  border-bottom: none;
}
</style>

<template>
  <ul class="todo-main">
    <UserItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" />
  </ul>
</template>

<script>
// 引入组件
import UserItem from "./UserItem.vue";

export default {
  name: "UserList",
  components: { UserItem },
  data() {
    return {
      todos: [
      { id: "001", title: "打代码", done: true },
      { id: "002", title: "看电视剧", done: true },
      { id: "003", title: "洗碗", done: false },
    ],
    };
  },
};
</script>

<style scoped>
/* main */
.todo-main {
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>