tailwindcss结合vue实现多个按钮点击高亮的案例

在结合Tailwind CSS和Vue.js实现多个按钮点击高亮的案例中，你可以按照以下步骤进行操作：

首先，确保已经安装了Vue.js和Tailwind CSS，并且已经在你的项目中引入它们。
创建一个Vue组件，可以命名为ButtonGroup，用于包裹多个按钮，并处理按钮的点击事件和高亮状态。

<template>
  <div>
    <button v-for="(button, index) in buttons" :key="index" @click="highlightButton(index)" :class="{ 'bg-blue-500': button.highlighted }" class="bg-gray-500 px-4 py-2 m-2 rounded-md text-white">
      {{ button.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { label: 'Button 1', highlighted: false },
        { label: 'Button 2', highlighted: false },
        { label: 'Button 3', highlighted: false },
      ],
    };
  },
  methods: {
    highlightButton(index) {
      this.buttons.forEach((button, i) => {
        button.highlighted = i === index;
      });
    },
  },
};
</script>

在上述代码中，我们通过v-for指令渲染了一个按钮数组，并为每个按钮绑定了点击事件@click。按钮的高亮状态通过button.highlighted属性来控制，我们通过点击按钮时遍历按钮数组并更新对应的highlighted属性来实现按钮的高亮切换。

在你的Vue应用中使用ButtonGroup组件，可以在需要的地方添加如下代码：

<template>
  <div class="container mx-auto mt-4">
    <ButtonGroup></ButtonGroup>
  </div>
</template>

<script>
import ButtonGroup from './ButtonGroup.vue';

export default {
  components: {
    ButtonGroup,
  },
};
</script>

在这里，我们将ButtonGroup组件添加到了主Vue组件中，并在需要的地方使用它。

运行你的应用，你应该能够看到多个按钮，当你点击按钮时，被点击的按钮会高亮显示。

这就是使用Tailwind CSS和Vue.js实现多个按钮点击高亮的案例。你可以根据你的需求自定义按钮样式和按钮行为