vue 数组添加数据
·
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)
}
4.concat() // 数组合并
let arrA = [1,2,3]
let arrB = [4,5]
arrA.concat(arrB) // 输出 1,2,3,4,5
let arrC = [6,7]
arrA.concat(arrB,arrC) // 输出 1,2,3,4,5,6,7
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)