今天在用vue做todolist项目的时候,双击编辑的这个一致不知道怎么写,后来看了实例的代码,贴上。。。
<li
v-bind:class="{completed: item.completed, editing: item === currentEditing}"
v-for="(item, index) of filterTodos">
<div class="view">
<input
class="toggle"
type="checkbox"
v-model="item.completed">
<label
@dblclick="currentEditing = item">{{ item.title }}</label>
<button
class="destroy"
@click="removeTodo(index, $event)"></button>
</div>
<input
class="edit"
:value="item.title"
@keyup.esc="currentEditing = null"
@keyup.enter="saveEdit(item, index, $event)"
@blur="saveEdit(item, index, $event)"
v-editing-focus="item === currentEditing">
</li>
在vue中的data中currentEditing=null,当双击点击完的时候就会让这个currentEditing=item,然后让这个li的类就加上一个editing,在css中利用优先级可以使edit显示出来,注意是利用 class class 优先级 覆盖class的display:none
所以 就完成了!
原文:https://www.cnblogs.com/popopo/p/15141155.html