vue 数据添加分为三种方法:1.unshift(),2.push(),3.splice()
<template>
<div>
<ul>
<li v-for="(time,index) of listTable" :key="index" @click="copyNew(time,index)">
{{time.id}}{{time.name1}}{{time.name2}} 添加
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
listTable:[
{id:'1',name1:'a1',name2:'b1'},
{id:'2',name1:'a2',name2:'b2'},
{id:'3',name1:'a3',name2:'b3'},
],
}
},
}
</script>
1.unshift() //数组头部添加一条新数据
let newList = {
id:'4'
name1:'a4',
name2:'b4',
}
this.listTable.unshift(newList) //unshift()在数组头部添加一条数据
console.log(this.listTable)
2.push() //数组末端添加一条新数据
this.listTable.push(newList) //push()在数组末端添加一条数据
console.log(this.listTable)
3.splice() //数组操作
copyNew(time,index){
console.log(time)
let newList = {
id:time.id,
name1:time.name1,
name2:time.name2,
}
//第一个参数为需要操作数据的下标,第二个参数为操作添加/删除(0为添加,1为不操作,2为删除,3为删除多条数据),第三个参数可选
this.listTable.splice(index,0,newList)
console.log(this.listTable)
}
|