vue使用splice()删除数组中的一个数据 弹出窗口提示问题
作者：大可大可抖
这篇文章主要介绍了vue使用splice()删除数组中的一个数据 弹出窗口提示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用splice()删除数组中的一个数据 弹出窗口提示
1. 循环输出数组时 v-for="(item,index) in list" //需要获取当前下标,item
2. 点击删除按钮传一个参数 ， 在这个弹窗口方法中获取到 这个参数。 在data中设置一个空置，把参数赋给这个值。
3. 弹窗中点击删除按钮 这个数组.splice(获取到的下标值，1)；
vue中splice()方法实现对数组进行增删改操作
语法结构：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>替换（修改）
相当于是先删除，再添加
<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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。