vue的todoList案例_vue todolist案例

一、静态页面设置完毕后

1.设置动态生成li对象（数据指{id:'001',title:'eat',done:true},）

（1）list中添加todos对象存放数据，再在item组件标签添加v-for，同时用todo接受todos数据内容

（2）在item的Vue中添加props['obj']接受数据，同时在显示数据的标签span中设置插值语句{ {obj.title}}

 （3）设置数据前面的复选框状态 item.vue

 在中的设置<input type="checkbox" :checked="obj.done" />，将传入的todo对象是否勾选的属性反应出来

 2.输入数据能够添加数据（ 在myHeader.vue组件中实现）

 思路：要获得用户输入数据，再把数据添加到list中
注意项：需要把用户输入的内容包装成一个todo对象，其中id属性可借用nanoid库来生成唯一id
（1）获取用户输入信息

 ①在input后面绑定‘弹起enter键触发’的add事件，@keyup.enter='add'

 ②在vue中methods添加add方法,有两种，一种是利用add(e){e.target.value}，可获得用户输入数据， 另一种是在input中用v-model双向绑定数据title，其中在Vue的data(){return title:''}，this.title即为输入数据

③安装nanoid库，引入并使用（nanoid为函数）

 

问题一：

 把数据添加到list中，由于obj数据是在list中，添加的数据在myHeader中，属于兄弟关系，所以要做调整：把list的数据交给APP，myHeader添加的数据交给APP即可

3.list数据交给APP

 ①把list中Vue的data剪切到APP中，同时由于list要使用数据，所以在list组件标签添加数据传输，

 ②传输后list要接收数据，所以在list的Vue中添加props进行接收

 （注意：如接收过来的数据叫todos，上面item的v-for中也要遍历todos才可以）