位置: IT常识 - 正文
Vue中splice()方法：实现对数组进行增删改的操作(vue的slice)
编辑：rootadminVue中splice()方法：实现对数组进行增删改的操作 
本文链接地址:https://www.jiuchutong.com/zhishi/298910.html
转载请保留说明！
推荐整理分享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遍历中，都需要
上一篇：【Unity】AI实战应用——Unity接入ChatGPT和对游戏开发实际应用的展望(unity ik)
下一篇：Python实战-新能源王者宁德时代股权穿透研究(附完整代码)(新版python)
