写一段vue代码 显示五个按钮文字 不点击显示一样的颜色 当点击其中的一个，被点击的按钮变色，其它按钮显示来的颜色

以下是一个简单的Vue.js示例代码，它实现了您所描述的功能：

<template>
  <div id="app">
    <button 
      v-for="button in buttons" 
      :key="button.id" 
      :class="{ active: button.isActive }"
      @click="toggleButton(button)"
    >
      {{ button.text }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { id: 1, text: '按钮1', isActive: false },
        { id: 2, text: '按钮2', isActive: false },
        { id: 3, text: '按钮3', isActive: false },
        { id: 4, text: '按钮4', isActive: false },
        { id: 5, text: '按钮5', isActive: false }
      ]
    };
  },
  methods: {
    toggleButton(selectedButton) {
      // 首先关闭所有按钮的激活状态
      this.buttons.forEach(button => {
        button.isActive = false;
      });
      // 激活被点击的按钮
      selectedButton.isActive = true;
    }
  }
};
</script>

<style>
.active {
  color: red; /* 被点击按钮的颜色 */
}
button {
  margin-right: 10px; /* 按钮间的间距 */
}
</style>

在这个例子中，我们定义了一个Vue组件，它有一个`buttons`数组，用于存储按钮的信息，包括其文本和是否处于激活状态。每个按钮都有一个`v-for`指令来重复渲染按钮列表，并且每个按钮都有一个`@click`事件处理器`toggleButton`。当按钮被点击时，`toggleButton`方法会将所有按钮的`isActive`状态设置为`false`，然后只将当前点击的按钮的`isActive`设置为`true`。在`<style>`部分定义了`.active`类，它会将按钮的文本颜色改为红色。