Vue中splice()方法：实现对数组进行增删改的操作(vue的slice)

Vue中splice()方法：实现对数组进行增删改的操作

推荐整理分享Vue中splice()方法：实现对数组进行增删改的操作(vue的slice)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue parseint,vue split is not a function,vue parseint,vue的slice,vue中split,vue split is not a function,vue中split,vue splitpane,内容如对您有帮助，希望把文章链接给更多的朋友！

 语法结构：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遍历中，都需要