第一步创建data数据 data:{ name:‘‘, list:[ // {id:1,name:‘小红‘,completed:false}, // {id:2,name:‘小蓝‘,completed:true}, // {id:3,name:‘小紫‘,completed:false}, ] }, 第二步，循环数据输出到模板 <li :class=”{completed:item.completed}” v-for=‘item in list‘ >
//动态的绑定classcompleted:item.completed完成划线效果 <div class=”view”> <input class=”toggle” type=”checkbox” checked> <label>{{item.name}}</label> <button class=”destroy”></button> </div> <input class=”edit” value=”Create a TodoMVC template”> </li> 第三步，checkbox和划线联动,当checkbox为true时item.completed的值也为true <li :class=”{completed:item.completed}” v-for=‘item in list‘ > <div class=”view”> <input class=”toggle” type=”checkbox”
v-model=‘item.completed‘> <label>{{item.name}}</label> <button class=”destroy”></button> </div> <input class=”edit” value=”Create a TodoMVC template”> </li> 第四步，添加数据功能 <header class=”header”> <h1>todos</h1> <input class=”new-todo” placeholder=”What needs to be done?” autofocus
@keyup.enter=‘add‘ v-model=‘name‘> // 使用键盘事件调用事件函数，使用双向数据绑定绑定name </header> methods:{ add(){
if(this.name.trim() === ‘‘){ //使用this.name.trim()方法防止输入空格
return
} //使用push方法添加数据对象，this.name=‘‘ 用来清除事件处理完成后的文字
this.list.push({id:4,name:this.name,completed:false}),
this.name=‘‘ } }, 第五步，删除功能 <li :class=”{completed:item.completed}” v-for=‘
(item,index) in list‘ > //使用item索引 <div class=”view”> <input class=”toggle” type=”checkbox” v-model=‘item.completed‘> <label>{{item.name}}</label> <button class=”destroy” @click=‘remove‘></button> </div> <input class=”edit” value=”Create a TodoMVC template”> </li> remove(index){ //删除 this.list.splice(index,1) } 第六步，隐藏页脚 <footer class=”footer”
v-show=‘showFooter‘> //使用v-show 建立显示隐藏 <!– This should be `0 items left` by default –> <span class=”todo-count”><strong>0</strong> item left</span> <!– Remove this if you don‘t implement routing –> <ul class=”filters”> <li> <a class=”selected” href=”#/”>All</a> </li> <li> <a href=”#/active”>Active</a> </li> <li> <a href=”#/completed”>Completed</a> </li> </ul> <!– Hidden if no completed items are left ↓ –> <button class=”clear-completed”>Clear completed</button> </footer> //检测数组中的元素数量，如果大于0返回true
computed:{
showFooter(){
return this.list.length > 0
}
}