一 、todolist编辑修改
双击todolist弹出Input框，供编辑修改。
1、todolist双击设置动作
- 给 checkbox,label,button(close)外套一个div层，编辑时可隐藏，样式名称为view
- 给label元素增加动作 @dblclick(todo)="editTodo(todo)"
- 在methods中增加editTodo对应方法
this.beforeEditCache=todo.title
this.editedTodo=todo
第一行：把当前内容缓存，如不保存可取回。第二行的this.editedTodo=todo 当双击label元素后，把todo赋值给editedTodo，这样li元素中的editing样式 todo == editedTodo判断条件为真，对应的样式生效。view div隐藏，input编辑框显示。
对应的CSS样式表如下，.todo-list li.editing .edit是个完整的名称，条件为假时，缺少中间的li.editing，即匹配不到该样式。
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 12px 16px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
2、增加input框供修改
- input框中增加双向绑定v-model="todo.title"读取内容,并设置样式为edit，该样式默认为隐藏。待双击lable框后显示。
修改框input的样式edit和输入框input的样式new-todo一样
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
再增加一个edit默认隐藏
.todo-list li .edit {
display: none;
}
- input框设置动作@blur=“doneEdit(todo)”input框失去焦点完成输入
@keyup.enter="doneEdit(todo)"按键回车完成输入
@keyup.ecs="cancelEdit(todo)"按键ecs取消输入
在methods中增加以上方法
doneEdit完成输入函数中：this.editedTodo=null ,todo.title=todo.title
cancelEdit取消输入函数中： todo.title=this.beforeEditCache, this.editedTodo=null
