Vue數組裏面添加數組

一、從Vue中數組裏面的數組怎麼拿

在Vue中，可以通過雙括號綁定方式來循環數組中的數組，也可以通過v-for指令循環展開多層數組。

<!-- 雙括號綁定方式 -->
<div v-for="arr in arrList">
    {{ arr }}
</div>

<!-- v-for指令循環展開多層數組 -->
<div v-for="arr in arrList">
    <div v-for="item in arr">
        {{ item }}
    </div>
</div>

// Vue組件中定義數組
data() {
    return {
        arrList: [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9]
        ]
    }
}

二、Vue循環數組裏面的數組

Vue可以循環數組中所有元素，包括數組嵌套數組的情況。在嵌套數組的情況下，需要使用嵌套的v-for指令。

<div v-for="arr in arrList">
    <span>{{ arr[0] }}</span>
    <div v-for="item in arr">
        <span>{{ item }}</span>
    </div>
</div>

三、Vue多層數組裏面有數組更新

如果有一個具有多層數組的對象數組，需要在Vue中更新其中某個數組的話，最好使用Vue.set來更新，避免引起一些潛在的更新問題。

<button @click="updateArray">Update Array</button>

methods: {
    updateArray() {
        const arr = this.arrList[0];
        this.$set(arr, 1, 'new value')
    }
}

四、Vue數組賦值給空數組

如果需要將一個Vue數組賦值給一個空數組，可以使用Array.slice方法或者Array.concat方法來實現。

let newArray = this.oldArray.slice();
let newArray = this.oldArray.concat();

五、Vue數組雙向綁定數組

在Vue中，通過v-model指令可以給一個數組綁定一個輸入框，同時也可以通過計算屬性來實現雙向綁定。

<template>
    <input type="text" v-model="arr[0]" />
</template>

computed: {
    arr: {
        get() {
            return this.$store.state.arr;
        },
        set(val) {
            this.$store.commit('updateArr', val);
        }
    }
}

六、Vue數組賦值給另一個數組

當需要將已有的一個數組複製到新數組中時，可以使用ES6展開運算符或者concat方法將其賦值給新數組。

// 使用展開運算符
let newArray = [...this.oldArray]

// 使用concat方法
let newArray = this.oldArray.concat()

七、Vue遍曆數組中的數組

通過雙括號綁定方式和v-for指令，在Vue中可以遍曆數組中的數組。

<div v-for="arr in arrList">
    <div v-for="item in arr">
        {{ item }}
    </div>
</div>

八、Vue複製數組生成新數組

Vue可以通過一些方法，複製一個已有的數組生成一個新的數組。

// slice方法
let newArray = this.oldArray.slice()

// concat方法
let newArray = this.oldArray.concat()

//展開運算符
let newArray = [...this.oldArray]

//使用Array.from方法
let newArray = Array.from(this.oldArray)

九、Vue一個數組賦值給另一個數組

當需要將已有的一個數組複製到另一個已有的數組中時，可以使用Array.splice方法將其賦值給另一個數組。

// 將一個數組賦值給另一個數組
let newArray = [];
newArray.splice(0, 0, ...this.oldArray);