vue 数组添加数据方式

目录 vue 数组添加数据 数据添加分为三种方法 动态向数组中添加对象（关于v-for，input和push） 核心：深拷贝

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于vue 数组添加数据方式的详细内容...