Vue中splice()方法对数组进行增删改等操作的实现
作者：李長庚
vue中对数组的元素进行删除,以前一直以为这个方法是vue中特有的,后来百度之后才知道原来是js的一个写法,下面这篇文章主要给大家介绍了关于Vue中splice()方法对数组进行增删改等操作的实现方法,需要的朋友可以参考下
语法结构：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
总结
到此这篇关于Vue中splice()方法对数组进行增删改等操作实现的文章就介绍到这了,更多相关Vue splice()对数组增删改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！