vue动态绑定css选中样式_vue css按钮选中样式

作者：小蓝xlanll | 2024-03-23 19:22:43

踩

vue css按钮选中样式

// 1.定义变量
activeHour == ‘24’
// 2.vue代码
<span @click=“hoursTab(‘24’)” v-bind:class="{ activeHour:hourTab == ‘24’}">24小时
<span @click=“hoursTab(‘48’)” v-bind:class="{ activeHour:hourTab == ‘48’}">48小时
// 3.方法
methods: {
hoursTab(val) {
this.hourTab = val
}
},
// 4.样式
.activeHour {
background-color: #1890ff;
color: #fff !important;
border-radius: 5px;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/297133