有5个红色的盒子，用vue实现点击其中一个盒子后，该盒子变为黑色，其他盒子 颜色不变

可以通过绑定点击事件，修改每个盒子的样式来实现。

假设你的盒子是这样定义的：

<template>
  <div>
    <div class="box" v-bind:class="{ active: activeIndex === 0 }" @click="changeColor(0)"></div>
    <div class="box" v-bind:class="{ active: activeIndex === 1 }" @click="changeColor(1)"></div>
    <div class="box" v-bind:class="{ active: activeIndex === 2 }" @click="changeColor(2)"></div>
    <div class="box" v-bind:class="{ active: activeIndex === 3 }" @click="changeColor(3)"></div>
    <div class="box" v-bind:class="{ active: activeIndex === 4 }" @click="changeColor(4)"></div>
  </div>
</template>

在Vue组件中，你可以定义一个`activeIndex`变量来记录当前被选中的盒子的下标。在点击事件中，你可以将`activeIndex`设置为被点击的盒子的下标，然后通过`v-bind:class`指令来动态地添加和删除`active`类，来修改盒子的样式。

<script>
export default {
  data() {
    return {
      activeIndex: -1, // -1 表示没有盒子被选中
    }
  },
  methods: {
    changeColor(index) {
      this.activeIndex = index
    }
  }
}
</script>

最后，你需要定义一个样式，来控制盒子的颜色：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
  margin-right: 10px;
}

.active {
  background-color: black;
}

这样，当用户点击一个盒子时，该盒子的颜色会变成黑色，其他盒子的颜色不变。