语法结构:splice(index,len,[item])
1、可以用来添加/删除/替换数组内某一个或者几个值
2、该方法会改变原始数组
index:数组开始下标
len: 替换/删除的长度
item:替换的值,删除操作的话 item为空
一、删除:
index表示要删除的数组下标, len长度为1(len设置1,如果为0,则数组不变),item为空表示执行删除操作
<template>
<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>
</template>
<script>
export default {
data(){
return{
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>
<style>
</style>
二、替换(修改):
相当于是先删除,再添加
<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(item, index) in persons" :key="index">
序号:{{index}}
名字:{{item.name}}
年龄:{{item.age}}
<button @click="update(index, {name:'张三', age: 16})">更新</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: {
//修改
update(index, item) {
this.persons.splice(index, 1, item)
}
}
})
</script>
三、添加:
index下标直接设置为0,len长度也设置为0,item传入要添加的对象
<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(item, index) in persons" :key="index">
序号:{{index}}
名字:{{item.name}}
年龄:{{item.age}}
</li>
</ul>
<button @click="add({name: '李四', age: 18})">添加</button>
</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: {
//添加
add (item) {
this.persons.splice(0, 0, item)
}
}
})
</script>
附加知识点:
在v-for遍历中,都需要声明:key,那么:key的作用是什么呢?
答:vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:
假设1、 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。
假设2、 同一层级的一组节点,他们可以通过唯一的id进行区分。
简单的说, :key的作用主要是为了高效的更新虚拟DOM
最后为了方便大家的沟通与交流请加QQ群: 625787746
请进QQ群交流:【IT博客技术分享群①】:https://jq.qq.com/?_wv=1027&k=DceI0140