vue 数组添加数据方式
作者:Now_li
这篇文章主要介绍了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
动态向数组中添加对象(关于v-for,input和push)
核心:深拷贝
第一步:
写在data(): 设datas数组,以及datas中需求的对象
datas: [], data_formInput: { keyword: '',//关键字 describe: '',//描述 },
第二步:(对象中的属性,input中的数据)双向绑定
<view class="box" v-show="box_show"> <view class="box_text">请输入关键字</view><input type="text" v-model="data_formInput.keyword" /> <view class="box_text">请输入描述</view><input type="text" v-model="data_formInput.describe" /> <button type="default" @click='create'>确定</button> </view>
第三步:深拷贝保存数据并置空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提交的数据
<button type="default" v-for="(item,index) in datas" :key='index' @click='open(item.describe)'> {{item.keyword}} </button>
放一段完整代码:
挺多的,实现了点击添加关键字按钮的时候打开输入关键字和描述,提交的页面,点击提交的时候显示已保存的关键字数据。逻辑很简单,主要是记录一下这里的深拷贝。
<template> <view class=""> <!-- 这里是输入关键字和描述 --> <view class="box" v-show="box_show"> <view class="box_text">请输入关键字</view><input type="text" v-model="data_formInput.keyword" /> <view class="box_text">请输入描述</view><input type="text" v-model="data_formInput.describe" /> <button type="default" @click='create'>确定</button> </view> <!-- 这里显示已提交的关键字以及添加关键字按钮 --> <view v-show="button_show"> <button type="default" v-for="(item,index) in datas" :key='index' @click='open(item.describe)'>{{item.keyword}}</button> <u-popup :show="show" @close="close" mode="center" round=20 closeable=true> <view> {{show_describe}} </view> </u-popup> <button type="default" @click='open_box'>添加关键字</button> </view> </view> </template>
<script> export default { data() { return { datas: [], data_formInput: { keyword: '', //关键字 describe: '', //描述 }, show_describe: '', show: false, box_show: false, button_show: true, } }, methods: { create() { 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 = '' this.box_show = false this.button_show = true }, // 打开描述 open(t) { this.show = true this.show_describe = t }, close() { this.show = false }, open_box() { this.box_show = true this.button_show = false } } } </script>
<style scoped> .box { width: 100%; height: 500rpx; overflow: hidden; /* margin-top: 50rpx; */ background-image: url(https://pic.imgdb.cn/item/624c0962239250f7c58f97a2.png); background-repeat: no-repeat; background-size: cover; } .box_text { text-align: center; margin-bottom: 20rpx; } input { width: 80%; height: 30rpx; border: 1rpx solid black; margin-top: 50rpx; overflow: hidden; margin: 10rpx auto; padding-left: 20rpx; font-size: 25rpx; } </style>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。