vue中如何给多个按钮动态添加类名
更新时间：2023年11月14日 14:10:30 作者：啵啵怪_
这篇文章主要介绍了vue中如何给多个按钮动态添加类名问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue给多个按钮动态添加类名
点击按钮，切换高亮背景
<button @click="btnClick(1)" :class="{ active: btnNum === 1 }">日</button>
<button @click="btnClick(2)" :class="{ active: btnNum === 2 }">日累计</button>
<button @click="btnClick(3)" :class="{ active: btnNum === 3 }">月</button>
<script>
export default {
data() {
return {
btnNum: 1,//默认‘日'高亮背景
}
},
methods:{
btnClick(index) {
this.btnNum = index;
}
}
}
</script>
<style>
.active {
background: #0c80dd !important;
}
</style>
vue动态添加两个类名
const isActive = ref(true)
const hasError = ref(false)
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue基础之data存储数据及v-for循环用法,结合实例形式分析了vue.js使用data存储数据、读取数据及v-for遍历数据相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
本文主要介绍了M1 pro芯片启动Vue项目的方法步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue3+vite+antd如何实现自定义主题问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue项目实例中用query传参如何实现跳转效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue.js 中 ref 和 reactive 的区别及用法解析
在Vue.js中,ref主要用于创建响应式的引用,通过.value属性来访问和修改值,特别适用于需要频繁更改整个值的场景,而reactive则用于创建深度响应的对象或数组,本文给大家介绍Vue.js 中 ref 和 reactive 的区别及用法,感兴趣的朋友跟随小编一起看看吧2024-09-09
Vue3利用组合式函数和Shared Worker实现后台分片上传
这篇文章主要为大家详细介绍了Vue3如何利用组合式函数和Shared Worker实现后台分片上传(带哈希计算),感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
vue.js的一大功能便是实现数据的双向绑定。这篇文章主要介绍了vue自定v-model实现 表单数据双向绑定的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要给大家介绍了vue 2.0路由之路由嵌套的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
为了方便大家写代码，Vue给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等，这篇文章将给大家分享Vue 中的常用的修饰符2022-10-10
最新评论