Vue & TailwindCSS: 实现多个按钮单独高亮显示 - 无需组件

<div id="app"><button v-for="(button, index) in buttons" :key="index" :class="{ 'bg-blue-500': button.active, 'bg-gray-200': !button.active }" @click="toggleButton(index)">{{ button.label }}</button></div>
<script>
new Vue({
  el: '#app',
  data: {
    buttons: [
      { label: 'Button 1', active: false },
      { label: 'Button 2', active: false },
      { label: 'Button 3', active: false },
    ]
  },
  methods: {
    toggleButton(index) {
      this.buttons[index].active = !this.buttons[index].active;
    }
  }
});
</script>
使用 `tailwindcss` 和 `vue` 结合实现多个按钮点击高亮的效果，下面是一个简单的示例：
<p>在上面的示例中，我们使用 <code>v-for</code> 指令在 <code>buttons</code> 数组上遍历创建多个按钮。通过绑定按钮的 <code>active</code> 属性，可以根据按钮的状态来动态添加 <code>bg-blue-500</code> 或 <code>bg-gray-200</code> 类，从而实现按钮的高亮效果。通过 <code>@click</code> 事件监听器，可以在按钮点击时切换按钮的状态。</p>
<p>这样，每个按钮都有自己的状态，并且可以单独高亮。不需要创建组件，只需使用 <code>Vue</code> 实例的数据和方法即可实现该功能。</p>