一、completed编辑状态
设置todo数组内completed状态，CSS设置完成状态
1、增加一个判断的样式
<li> 标签内增加属性 :class="{completed:todo.completed}"
给当前的todo list 增加一个completed类，当todo.completed值为true该类生效；在methods方法中，新增一个todo list时todo.completed值都是false。
2、增加checkbox
在li内增加一个checkbox，勾选代表完成。该checkbox的双向绑定v-model="todo.completed"
3、label元素包裹{{todo.title}}，最终CSS用于label
completed代码
4、设置CSS
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
当todo.completed为true时，既匹配到以上CSS，效果生效。
二、删除
1、 增加删除按钮
在<li>中增加button按钮，定义样式名称为destroy，@click="removeTodo(todo)"
2、定义methods方法
removeTodo(todo):function(){
this.todos.splice(this.todos.indexOf(todo),1)
3、定义destroy的样式
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px; #af5b5e;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
最终效果截图
