前言
先上个运行截图，然后咱再来一部一部分析代码制作，这个小应用，以为很简单，实际制作过程中还是遇到了些问题。
1.用户输入的数据，待办事项用一个对象来保存，为什么用对象呢，因为一个待办事项是否完成了，也属于待办事项的属性，而用户输入内容的为待办事项的内容。对象模型如下
item:{value:'',check:'false'}2.建立一个数组来存放所有的待办事项。
List:[]事件：用户输入后点击enter的事件,用户点击完成的事件,用户点击X的删除事件
事件发生时的执行的方法:用户输入完成点击enter后，创建一个待办事项对象，value属性为用户输入的内容，check为fasle表示未完成,然后将这个对象放入List中。用户点击小方框的事件:修改对应的待办事项的check为true。为文字添加删除线样式。用户点击X的事件:在List中删除对应的待办事项。具体代码:
html部分:
<div id="app" style="width: 200px;margin: 20px auto;">
<!--输入框 -->
<input type='text' v-model='value' :placeholder="ts" @keyup.enter='inptEvent'/>
<div v-if='List.length>0'>
<div style="padding:10px 0;" v-for='(item,index) in List' :key="item.value">
<!--选择框 -->
<input type="checkbox" @click='checkEvent(item)' >
<!--待办事项 -->
<span :class='{active:item.checked}'>{{item.value}}</span>
<span style="padding:0 5px;cursor: pointer;background-color: #f3f3f3;" @click='deleteA(index)'>X</span>
</div>
</div>
<div v-else>
<p>输入待办事项吧</p>
</div>
</div>
JavaScript 部分：
var app = new Vue({
el: '#app',
data: {
//value存放用户输入的信息
value: '',
//提示信息
ts: '请输入待办事项',
//存放待办事项的数组
List:[],
},
methods: {
//用户输入完成点击enter的事件
inptEvent(){
//待办事项对象
let item = {}
//将待办事项的选择状态设置为false
item.checked = false;
//将待办事项的value设置为用户输入的value
item.value = this.value;
//将待办事项对象放入待办事项数组
this.List.unshift(item);
//将value设置为空
this.value = '';
},
//用户点击复选框的事件
checkEvent(item){
item.checked=!item.checked;
},
//用户点击X的事件
deleteA(index){
//将待办事项从数组中删除
this.List.splice(index,1)
}
},
})
CSS部分:
//为文字添加下划线
.active{
text-decoration: line-through;
}
坑
坑来了,:key="item.value"v-for 循环待办事项这个数组的 key值不能重复,如果你使用List数组的index的值,就悲剧了.如果有若干个待办事项,将最后一个的前一个待办事项打勾,设置为以完成,然后再把它删除.你会发现,最后一个待办事项明明你没打勾,现在却打上勾了.我们来分析下怎么回事啊,假设,最后一个待办事项的key值为n,那么前一个的key值就是n-1,当你删除最后一项的前一项时,最后一项的key值变为n-1,因为先前存在key值为n-1的DOM元素,内容被更新,DOM元素会被复用.所以呀这个key值不能为index,可以为待办事项对象设置一个唯一的id做为key值,也可以将待办事项的value值设为key值,这样的话得加个判断,让用户不能输入重复的待办事项,如果有重复的待办事项,会出现和上面一样的问题
