本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

删除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)效果展示:

3bf540fff0b7a65f3ad87ee7b87e8f0.png

以上就是如何删除vue.js列表中的一行的详细内容,更多请关注其它相关文章!