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