今天在用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