vue写有两个for循环四个按钮，默认都选择第一个按钮，并计算数值，当选择的按钮改变时自动重新计算

好的，下面是一个使用Vue.js实现的示例代码，可以满足您的需求：

HTML部分：

<div id="app">
  <div v-for="(row, rowIndex) in rows" :key="rowIndex">
    <div v-for="(col, colIndex) in cols" :key="colIndex">
      <button :class="{ active: isActive(rowIndex, colIndex) }" @click="selectButton(rowIndex, colIndex, 0)">Button1</button>
      <button :class="{ active: isActive(rowIndex, colIndex) }" @click="selectButton(rowIndex, colIndex, 1)">Button2</button>
      <button :class="{ active: isActive(rowIndex, colIndex) }" @click="selectButton(rowIndex, colIndex, 2)">Button3</button>
      <button :class="{ active: isActive(rowIndex, colIndex) }" @click="selectButton(rowIndex, colIndex, 3)">Button4</button>
      <span>Selected value: {{ selectedValues[rowIndex][colIndex] }}</span>
    </div>
  </div>
</div>

Vue.js部分：

new Vue({
  el: '#app',
  data: {
    rows: 2,
    cols: 2,
    selectedValues: [],
    activeButton: 0
  },
  mounted() {
    // 初始化selectedValues数组
    for (let i = 0; i < this.rows; i++) {
      this.selectedValues.push([]);
      for (let j = 0; j < this.cols; j++) {
        this.selectedValues[i].push(0);
      }
    }
  },
  methods: {
    selectButton(row, col, value) {
      // 更新selectedValues数组
      this.selectedValues[row][col] = value;
    },
    isActive(row, col) {
      // 判断当前按钮是否被选中
      return this.selectedValues[row][col] === this.activeButton;
    }
  },
  watch: {
    selectedValues: {
      // 监听selectedValues数组变化，重新计算数值
      handler: function() {
        console.log('Selected values changed:', this.selectedValues);
        // TODO: 在这里重新计算数值
      },
      deep: true
    }
  }
});

以上代码中，我们使用了Vue.js的双向数据绑定机制来自动更新视图，监听了selectedValues数组的变化，当数组中的值发生变化时，会触发watch中的handler函数，从而重新计算数值。同时，我们也实现了按钮的选择和取消选择功能，使得用户可以自由选择需要的按钮。

注意，以上代码仅作为示例，具体实现可能需要根据您的具体需求来进行调整。希望能帮到您！