vue 数组添加数据

lovelilt

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)
}