第一步创建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
}
this.list.push({id:4,name:this.name,completed:false}),
this.name=''
}
},