您现在的位置是：网站首页> 编程资料编程资料
vue 数组添加数据方式_vue.js_
2023-05-24
298人已围观
简介 vue 数组添加数据方式_vue.js_
vue 数组添加数据
数据添加分为三种方法
- 1.
unshift() - 2.
push() - 3.
splice()
- {{time.id}}{{time.name1}}{{time.name2}} 添加
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
动态向数组中添加对象（关于v-for，input和push）
核心：深拷贝
第一步：
写在data(): 设datas数组，以及datas中需求的对象
datas: [], data_formInput: { keyword: '',//关键字 describe: '',//描述 },第二步：（对象中的属性，input中的数据）双向绑定
请输入关键字 请输入描述
第三步：深拷贝保存数据并置空input
create() { //这里要设一个对象来进行深拷贝才能避免每次push的时候都被最后一次提交的数据覆盖，也可以避免置空的时候数据丢失 let obj = { keyword: this.data_formInput.keyword, describe: this.data_formInput.describe } this.datas.push(obj); this.data_formInput.keyword = ''//提交input之后置空 this.data_formInput.describe = '' },第四步：循环显示刚刚input提交的数据
放一段完整代码：
挺多的，实现了点击添加关键字按钮的时候打开输入关键字和描述，提交的页面，点击提交的时候显示已保存的关键字数据。逻辑很简单，主要是记录一下这里的深拷贝。
请输入关键字 请输入描述 {{show_describe}}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章:
