vue數組添加數據的方法有哪些

本篇內容主要講解“vue數組添加數據的方法有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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://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數組添加數據的方法有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！