vue?數(shù)組添加數(shù)據(jù)方式

更新時間：2022年08月23日 16:15:55 作者：Now_li

這篇文章主要介紹了vue?數(shù)組添加數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue 數(shù)組添加數(shù)據(jù)

數(shù)據(jù)添加分為三種方法

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() //數(shù)組頭部添加一條新數(shù)據(jù)

let newList = {
? ?id:'4'
? ?name1:'a4',
? ?name2:'b4',
?}
this.listTable.unshift(newList) ?//unshift()在數(shù)組頭部添加一條數(shù)據(jù)?
console.log(this.listTable)

2.push() //數(shù)組末端添加一條新數(shù)據(jù)

this.listTable.push(newList) ?//push()在數(shù)組末端添加一條數(shù)據(jù)?
console.log(this.listTable)

3.splice() //數(shù)組操作

?copyNew(time,index){
? ?console.log(time)
? ?let newList = {
? ? ?id:time.id,
? ? ?name1:time.name1,
? ? ?name2:time.name2,
? ?}
? ?//第一個參數(shù)為需要操作數(shù)據(jù)的下標，第二個參數(shù)為操作添加/刪除(0為添加，1為不操作，2為刪除，3為刪除多條數(shù)據(jù))，第三個參數(shù)可選
? ?this.listTable.splice(index,0,newList)?
? ?console.log(this.listTable)
?}

4.concat() // 數(shù)組合并

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

動態(tài)向數(shù)組中添加對象（關于v-for，input和push）

核心：深拷貝

第一步：

寫在data(): 設datas數(shù)組，以及datas中需求的對象

datas: [],
data_formInput: {
?? ?keyword: '',//關鍵字
?? ?describe: '',//描述
},

第二步：（對象中的屬性，input中的數(shù)據(jù)）雙向綁定

<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>

第三步：深拷貝保存數(shù)據(jù)并置空input

create() {
//這里要設一個對象來進行深拷貝才能避免每次push的時候都被最后一次提交的數(shù)據(jù)覆蓋，也可以避免置空的時候數(shù)據(jù)丟失
?? ?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 = ''
},

第四步：循環(huán)顯示剛剛input提交的數(shù)據(jù)

<button type="default" v-for="(item,index) in datas" :key='index' @click='open(item.describe)'>
??? ? {{item.keyword}}
</button>

放一段完整代碼：

挺多的，實現(xiàn)了點擊添加關鍵字按鈕的時候打開輸入關鍵字和描述，提交的頁面，點擊提交的時候顯示已保存的關鍵字數(shù)據(jù)。邏輯很簡單，主要是記錄一下這里的深拷貝。

<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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

el-form-item中表單項label和表單項內(nèi)容換行實現(xiàn)方法
這篇文章主要給大家介紹了el-form-item中表單項label和表單項內(nèi)容換行實現(xiàn)的相關資料,每個表單el-form由多個表單域el-form-item組成,需要的朋友可以參考下
2023-09-09
解決VUE雙向綁定失效的問題
今天小編就為大家分享一篇解決VUE雙向綁定失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue 組件之間的通信方式詳解
在 Vue.js 中,組件是構(gòu)建應用程序的基本單位,然而,當你的應用程序變得復雜時,組件之間的通信變得至關重要,本文將介紹幾種 Vue 組件之間通信的方式,幫助你更好地管理和組織代碼,感興趣的朋友一起看看吧
2024-06-06
Vue3+Vite實現(xiàn)一個Markdown編輯器組件
在現(xiàn)代前端開發(fā)中,Markdown 編輯器廣泛應用于博客,文檔,Wiki,代碼注釋等場景,本文將使用 Vue 3 構(gòu)建一個簡單的 Markdown 編輯器組件,感興趣的小伙伴可以了解下
2025-04-04
vue中使用騰訊云Im的示例
這篇文章主要介紹了vue中使用騰訊云Im的示例，幫助大家調(diào)用對應的api，完成自己的項目，感興趣的朋友可以了解下
2020-10-10
Vue模擬el-table演示插槽用法的示例詳解
很多人知道插槽分為三種，但是實際到elementui當中為什么這么用，就一臉懵逼，接下來就跟大家聊一聊插槽在elementui中的應用，并且自己寫一個類似el-table的組件，感興趣的可以了解一下
2023-05-05
vue組件（全局，局部，動態(tài)加載組件）
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下
2018-09-09
詳解Vue監(jiān)聽數(shù)據(jù)變化原理
本篇文章主要介紹了Vue監(jiān)聽數(shù)據(jù)變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Vue實例簡單方法介紹
這篇文章主要為大家詳細介紹了Vue實例的一些簡單方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
vue 實現(xiàn)用戶登錄方式的切換功能
這篇文章主要介紹了vue 實現(xiàn)用戶登錄方式的切換功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04