首页 > 其他 > 详细

vue一个小方法

时间:2021-08-14 17:47:50      阅读:52      评论:0      收藏:0      [点我收藏+]

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

所以 就完成了!

vue一个小方法

原文:https://www.cnblogs.com/popopo/p/15141155.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!