Vue.js中splice()方法实现对数组进行删除的操作
https://blog.csdn.net/qq15577969/article/details/89033120?utm_source=app
·
语法结构:splice(index,len,[item])
1、可以用来添加/删除/替换数组内某一个或者几个值
2、该方法会改变原始数组
index:数组开始下标
len: 替换/删除的长度
item:替换的值,删除操作的话 item为空
删除:
index表示要删除的数组下标, len长度为1(len设置1,如果为0,则数组不变),item为空表示执行删除操作
<div id="demo">
<h2>v-for 遍历数组</h2>
<ul>
<li v-for="(item, index) in persons" :key="index">
序号:{{index}}
名字:{{item.name}}
年龄:{{item.age}}
<button @click="del(index)">删除</button>
</li>
</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
persons: [
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
methods: {
//删除(注意:删除的方法名不能用delete,因为delete是系统关键字)
del(index) {
this.persons.splice(index, 1)
}
}
})
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)