本篇内容主要讲解“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
第一步:
写在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://cache.yisu.com/upload/information/20220823/112/6497.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>
到此,相信大家对“vue数组添加数据的方法有哪些”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。