vue编程实现： 使用条件渲染实现三个按纽切换“红灯”“黄灯”“绿灯”状态

在 Vue.js 中，你可以使用 `v-if` 或者更推荐的 `v-bind:class` 根据条件动态地绑定按钮的样式类名来实现“红灯”、“黄灯”和“绿灯”的状态切换。下面是一个基本的例子：

首先，在 HTML 模板中，定义一个按钮和三个 CSS 类来代表三种颜色的状态：

<button @click="toggleLightStatus(0)" :class="{ red: lightStatus === 0, yellow: lightStatus === 1, green: lightStatus === 2 }"
  :style="{ color: lightStatus === 0 ? 'red' : lightStatus === 1 ? 'yellow' : 'green' }"
>红灯</button>
<button @click="toggleLightStatus(1)" :class="{ red: lightStatus === 0, yellow: lightStatus === 1, green: lightStatus === 2 }"
  :style="{ color: lightStatus === 0 ? 'red' : lightStatus === 1 ? 'yellow' : 'green' }"
>黄灯</button>
<button @click="toggleLightStatus(2)" :class="{ red: lightStatus === 0, yellow: lightStatus === 1, green: lightStatus === 2 }"
  :style="{ color: lightStatus === 0 ? 'red' : lightStatus === 1 ? 'yellow' : 'green' }"
>绿灯</button>

接下来，在 JavaScript 部分定义 `toggleLightStatus` 方法，它接受一个参数表示状态索引（0为红色，1为黄色，2为绿色），改变 `lightStatus` 的值：

export default {
  data() {
    return {
      lightStatus: 0, // 初始状态设为红灯
    };
  },
  methods: {
    toggleLightStatus(index) {
      this.lightStatus = (index + 1) % 3; // 状态循环，取模3保证索引在0-2之间
    },
  },
};

在这个例子中，当你点击某个按钮时，对应的 `lightStatus` 就会变化，进而触发按钮的样式改变。