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>   

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue2.0实现分页组件的实例代码

    vue2.0实现分页组件的实例代码

    这篇文章主要介绍了vue2.0实现分页组件的实例代码,需要的朋友可以参考下
    2017-06-06
  • Vue3中reactive函数toRef函数ref函数简介

    Vue3中reactive函数toRef函数ref函数简介

    这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下
    2021-09-09
  • vue 组件高级用法实例详解

    vue 组件高级用法实例详解

    这篇文章主要介绍了vue 组件高级用法,需要的朋友可以参考下
    2018-04-04
  • Vue中引入使用patch-package为依赖打补丁问题

    Vue中引入使用patch-package为依赖打补丁问题

    这篇文章主要介绍了Vue中引入使用patch-package为依赖打补丁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue调用谷歌授权登录获取用户通讯录的实现示例

    vue调用谷歌授权登录获取用户通讯录的实现示例

    本文主要介绍了vue调用谷歌授权登录获取用户通讯录的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue router 用户登陆功能的实例代码

    vue router 用户登陆功能的实例代码

    这篇文章主要介绍了vue router 用户登陆功能的实例代码,主要用到H5中的会话存储(sessionStorage)、vue-router路由前置操作、路由元信息(meta)等知识点,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-04-04
  • 从0搭建vue3组件库Input组件

    从0搭建vue3组件库Input组件

    这篇文章主要介绍了从0搭建vue3组件库Input组件,每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行实例代码讲解,需要的朋友可以参考下
    2022-11-11
  • vue中marker被识别点击的过程场景分析

    vue中marker被识别点击的过程场景分析

    这篇文章主要介绍了vue中marker被识别点击的过程场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue3 ts组合式API异常onMounted is called when there is no active component解决

    vue3 ts组合式API异常onMounted is called when&

    这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Vue toFixed保留两位小数的3种方式

    Vue toFixed保留两位小数的3种方式

    这篇文章主要介绍了Vue toFixed保留两位小数的3种方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论