vue的todolist

长话短说，第一步搭建基础页面框架

本次环境在vue-cli中，环境自行在vue官方文档中搭建，
所需要的vue基础也可参考vue官方文档
首先，我们很清楚这个页面长啥样，一个输入框，一个按钮，两个<ul>
包含一定的内容。
输入框
存在点击事件和v-model双向绑定。
按钮
将输入框数据获取并添加到<ul>中
<ul>
储存数据,并用v-model绑定一种状态，区分正在进行和已完成

第二步，实现功能

对于输入框：
<input type="text" v-model="todo"><button @click="add()">+</button>
将输入框中数据返到了todo里面，并切储存在数组中
在<ul>中访问并显示
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model="item.checked"> {{item.todo}}---<button @click="deleteIt(key)">删除</button> </li>
注：这一段中v-for访问并显示，v-model="item.checked"使得每条数据有两种状态可以区分，
还有一个删除功能，较好实现不再解释。

第三步这里的js部分，目的让数据增删，

学过js看懂不难，项目整体偏易。
export default{
data(){
return{
todo:'',
list:[{todo:'vue',checked:false}],
} },
methods:{
add(){
this.list.push({todo:this.todo,checked:false});
this.todo='';
},
deleteIt(key){
this.list.splice(key,1);
} } }