关于v-model应用

作为一个刚接触前端的小白，今天vue脚手架在写作业，发现v-model真的好用

我们写的作业，如图：

由于我们只学习了父传子和子传父，爷孙和兄弟之间还没学，所以只能用我们所学的知识来写。

我刚开始就是用App.vue传给mymiddlelist.vue(里面放的结构就是ul)，然后再传给mymiddle.vue(里面放的结构就是li)，就是一层一层向下传，很麻烦。。。

1.先把每个组件之间的关系连接好，这个我就不多说了，直接从传数据开始

App.vue中的代码

 

因为要在App.vue里面更改数据。所以我直接把数据写在App.vue了

2.接收App.vue传的数据，在mymiddlelist.vue对数据进行遍历循环

mymiddlelist.vue中的代码

 3.对数据进行渲染

mymiddle.vue中的代码

 这就是渲染好的页面，如果进行勾选，按照普通的方法我们需要在App.vue中定义一个函数，在把这个函数一层一层的传给mymiddle.vue，获取id，再传给App.vue

如代码：

App.vue

   勾选
    checktode(id) {
      this.list.forEach((item) => {
        if (item.id === id) {
          item.done = !item.done;
        }
      });
    }

我想了想既然name都能渲染过来，那id也肯定能渲染过来，所以想起v-model这个双向绑定，直接让v-model接收数据里面的done值不就行了

 <input type="checkbox" v-model="todo.done" />

页面改变数据也改变，数据改变页面也改变， 所以就不用再子传父传父了，一个指令就完事。。。