目录 vue 数组添加数据 数据添加分为三种方法 动态向数组中添加对象（关于v-for，input和push） 核心：深拷贝 vue 数组添加数据 数据添加分为三种方法 1. unshift() 2. push() 3. splice() template
目录
- 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(http://img.558idc.com/uploadfile/allimg/js/AgAAC6u-TVNRxijAPHZAjqc6wXVSKeU-.jpg);
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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。