循环渲染数据

1. 数据 data的返回对象里面

   list: [
           {
         id: 100, name: "吃饭", isDone: true },
           {
         id: 201, name: "睡觉", isDone: false },
           {
         id: 103, name: "打豆豆", isDone: true },
         ],
   

2. 向 TodoMain.vue子组件传递数据

   <TodoMain :list="list"></TodoMain>
   

3. TodoMain.vue接受父组件的数据

    props: ["list"],
   

4. 循环li v-for 使用id

    <li class="completed" v-for="(item, index) in list" :key="item.id">
      .....
    </li>
   

5. 高亮任务名

   补充:

   • 动态显示class 布尔值为true的时候增加类名，为false的时候删除类名

   • :class = “ { 类名：布尔值 } ”

<li
      :class="{ completed: item.isDone }"
      v-for="(item, index) in list"
      :key="item.id"
    >
    ......
</li>

6. 绑定checked

  <input class="toggle" type="checkbox" v-model="item.isDone" />

增加任务

1. 给 input添加一个 绑定数据的变量,能把input的值获取然后传递 , 又绑定键盘按下事件

<input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="task"
      @keydown.enter="addTask"
    />

2. 子传父 添加自定义事件

 methods: {
   
    addTask() {
   
      this.$emit("addTask", this.task);
    },
  },

3. 父组件App.vue监听事件

<TodoHeader @addTask="addTask"></TodoHeader>

4. App.vue 父组件创建一个处理函数 addTask()来增加任务

methods: {
   
    addTask(task) {
   
      this.list.push({
   
        id</