1.測試vue中二維數(shù)組的動態(tài)渲染
話不多說每聪，先上代碼旦棉，如下圖用vue先定義一個10X10的二維數(shù)組
<template>
<div id="card_container">
<div class="body">
<div class="column" v-for="(item,i) in arr" :key="i">
<div class="item" v-for="(jtem,j) in item" :key="j">{{jtem}}</div>
</div>
</div>
<button @click="change">改變</button>
</div>
</template>
export default {
data() {
return {
arr: []
};
},
created() {
this.getNumber();
console.log(this.arr[0][0]);
},
methods: {
change() {
this.arr.splice(0, 1, 18);
console.log(this.arr[0][0]);
},
getNumber() {
this.arr = new Array(10);
for (let i = 0; i < 10; i++) {
this.arr[i] = new Array(10);
for (let j = 0; j < 10; j++) {
this.arr[i][j] = 11;//讓 arr 的所有值都為11
}
}
}
}
};
測試發(fā)現(xiàn)，arr[0][0]確實發(fā)生了變化药薯，但是渲染的視圖卻沒有動態(tài)更新绑洛。
如果把數(shù)組的第一維作為形參，傳遞到函數(shù)中童本，再執(zhí)行這樣的操作真屯，發(fā)現(xiàn)雖然數(shù)字變了，但視圖還是沒用動態(tài)更新穷娱。
<template>
<div id="card_container">
<div class="body">
<div class="column" v-for="(item,i) in arr" :key="i">
<div @click="change(item,j)" class="item" v-for="(jtem,j) in item" :key="j">{{jtem}}</div>
</div>
</div>
</div>
</template>
methods: {
change(a,i) {
console.log(a[i]);
a.splice(i, 1, 18);
console.log(a[i]);
}
2.于是測試一維數(shù)組（數(shù)組中有對象的情況）绑蔫，發(fā)現(xiàn)一維數(shù)組可以動態(tài)渲染
并比較兩種改變值的方法
- 對象的賦值方法
this.$set(this.arr[0],'test',18) - 數(shù)組的賦值方法
this.arr[0].splice(0,1,18)
<template>
<div id="card_container">
<div class="body">
<div class="column" v-for="(item,i) in arr" :key="i">
{{arr[i].test}}
</div>
</div>
<button @click="change">點我</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 10,
arr: [],
b:0
};
},
created() {
this.getNumber();
console.log(this.arr[0]);
},
methods: {
change() {
this.arr.splice(0, 1, {'test':18});
console.log(this.arr[0]);
},
getNumber() {
this.arr = new Array(this.count);
for (let i = 0; i < this.count; i++) {
this.arr[i]={'test':11}
}
}
}
};
測試發(fā)現(xiàn)运沦，只有用數(shù)組的方法賦值，視圖才能動態(tài)更新配深。
