tailwindcss结合vue实现多个按钮点击高亮的案例不要创建组件
以下是一个使用Tailwind CSS和Vue.js实现多个按钮点击高亮的简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Tailwind CSS样式 -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css" rel="stylesheet">
<title>Tailwind CSS + Vue.js</title>
</head>
<body>
<div id="app" class="container mx-auto">
<div class="flex">
<button
v-for="(button, index) in buttons"
:key="index"
:class="{ 'bg-blue-500': button.active, 'bg-gray-300': !button.active }"
class="py-2 px-4 rounded-md mr-2"
@click="toggleButton(index)"
>
{{ button.label }}
</button>
</div>
</div>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
buttons: [
{ label: 'Button 1', active: false },
{ label: 'Button 2', active: false },
{ label: 'Button 3', active: false },
{ label: 'Button 4', active: false },
],
},
methods: {
toggleButton(index) {
this.buttons[index].active = !this.buttons[index].active;
},
},
});
</script>
</body>
</html>
在这个例子中，我们使用v-for指令来循环渲染按钮，并使用:class绑定按钮的样式。按钮的样式根据button.active属性来动态改变。当按钮被点击时，调用toggleButton方法来切换button.active的值，从而改变按钮的样式。
注意：这个案例中没有创建任何组件，只是使用了Vue.js的基本功能和Tailwind CSS的样式
原文地址: https://www.cveoy.top/t/topic/ivWO 著作权归作者所有。请勿转载和采集!