利用vue实现页面中添加四个按钮：红、黄、蓝、黑，再添加一个矩形框，点击不同的按钮，矩形框的颜色会被切换。

在Vue.js中，你可以通过组合模板、数据和事件监听器来实现这个功能。首先，你需要设置一个组件的数据状态来存储当前选中的颜色，然后在HTML模板中创建按钮和矩形框，并绑定对应的事件处理函数。

1. 首先，在你的`data()`函数中定义初始颜色和按钮数组：

export default {
  data() {
    return {
      selectedColor: 'red', // 初始颜色
      colors: ['red', 'yellow', 'blue', 'black'], // 所有可用颜色
    };
  },
};

2. 在`template`部分，创建按钮和矩形框：

<template>
  <div>
    <button v-for="(color, index) in colors" :key="index" @click="changeRectangleColor(color)">
      {{ color }}
    </button>

    <div class="rectangle" :style="{ backgroundColor: selectedColor }"></div>
  </div>
</template>

3. 添加`methods`来处理颜色切换：

<script>
export default {
  methods: {
    changeRectangleColor(color) {
      this.selectedColor = color;
    },
  },
};
</script>

4. CSS 样式（假设`.rectangle`是你为矩形框设定的类名）:

.rectangle {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
}

现在，当你点击按钮时，矩形框的颜色会根据`selectedColor`的状态变化而改变。