Vue 中使用 Tailwind CSS 实现按钮点击高亮效果 | 代码示例

要实现这个案例，你可以在 Vue 的模板中使用 Tailwind CSS 的类来控制按钮的样式，并使用 Vue 的事件绑定来处理按钮的点击事件。\n\n以下是一个简单的例子：\n\nhtml\n<template>\n <div>\n <button :class="{ 'bg-blue-500': active === 1, 'bg-gray-500': active !== 1 }" @click="setActive(1)">\n 按钮1\n </button>\n <button :class="{ 'bg-blue-500': active === 2, 'bg-gray-500': active !== 2 }" @click="setActive(2)">\n 按钮2\n </button>\n <button :class="{ 'bg-blue-500': active === 3, 'bg-gray-500': active !== 3 }" @click="setActive(3)">\n 按钮3\n </button>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n active: 1\n };\n },\n methods: {\n setActive(index) {\n this.active = index;\n }\n }\n};\n</script>\n\n<style>\nbutton {\n padding: 10px;\n margin: 5px;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #3182ce;\n}\n\nbutton:focus {\n outline: none;\n}\n</style>\n\n\n在上面的例子中，我们使用了v-bind:class指令来动态绑定按钮的类。根据active的值来判断哪个按钮应该亮起，我们使用了三元表达式来设置bg-blue-500类（亮的颜色）或bg-gray-500类（不亮的颜色）。\n\n@click指令用于绑定按钮的点击事件，当点击按钮时，setActive方法会被调用，将active的值更新为对应按钮的索引。\n\n最后，我们在样式中定义了按钮的基本样式，并使用了一些Tailwind CSS的类来设置背景颜色和其他样式。