Vue TodoList 解析 2.编辑完成状态和删除

一、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;
}

最终效果截图