Tailwind CSS 与 Vue.js 实现多个按钮点击高亮示例

在结合 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 实现多个按钮点击高亮的案例。你可以根据你的需求自定义按钮样式和按钮行为。