本文环境: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)效果展示:
以上就是如何删除vue.js列表中的一行的详细内容,更多请关注其它相关文章!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。