vue.js删除列表中的一行

splice(index,num,item1,item2,…,itemX) 方法向/从数组中添加/删除项目,然后返回被删除的项目。

注:index–规定添加/删除项目的位置

num–要删除的项目数量

item–向数组添加的新项目

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

(1)html代码:

 <div id=\"app\">
   <ul>
    <li v-for=\"todo in todos\">
     <span>{{ todo.text }}</span>
     <button @click=\"removeTodo($index)\">X</button>
    </li>
   </ul>
  </div>

(2)js代码:

 <script>
    new Vue({
     el: \'#app\',
     data: {
      todos: [
       { text: \'Add some todos\' },
       { text: \'Learn JavaScript\' },
       { text: \'Learn Vue.js\' },
       { text: \'Build Something Awesome\' }
      ]
     },
     methods: {
      removeTodo: function (index) {
       this.todos.splice(index, 1);
      }
     }
    })
  </script>

(3)效果展示:

vue.js删除列表中的一行

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容