tailwindcss结合vue实现多个按钮点击高亮单独高亮的案例不要创建组件

可以使用tailwindcss和vue结合实现多个按钮点击高亮的效果，下面是一个简单的示例：

<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>

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;
    }
  }
});

在上面的示例中，我们使用v-for指令在buttons数组上遍历创建多个按钮。通过绑定按钮的active属性，可以根据按钮的状态来动态添加bg-blue-500或bg-gray-200类，从而实现按钮的高亮效果。通过@click事件监听器，可以在按钮点击时切换按钮的状态。

这样，每个按钮都有自己的状态，并且可以单独高亮。不需要创建组件，只需使用Vue实例的数据和方法即可实现该功能