Vue.js中的二维数组

<template>
  <div>
    <table border="1">
      <tr v-for="(row, rowIndex) in matrix" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </table>
    <button @click="updateMatrix">Update Matrix</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      matrix: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
      ]
    };
  },
  methods: {
    updateMatrix() {
      // 修改二维数组的一个元素
      this.matrix[1][1] = Math.random();
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  padding: 8px;
  text-align: center;
}
</style>

// 使用Vue.set
this.$set(this.matrix[1], 1, Math.random());

// 使用splice
this.matrix[1].splice(1, 1, Math.random());

// 在data函数中初始化
data() {
  return {
    matrix: []
  };
},
created() {
  // 动态生成二维数组
  this.matrix = Array.from({ length: 3 }, () => Array(3).fill(0));
}