vue动态添加类名方法（实现tab切换效果或导航选中效果）

最新推荐文章于 2024-07-01 17:56:59 发布

原创最新推荐文章于 2024-07-01 17:56:59 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

css

5 篇文章

订阅专栏

文章讲述了在Vue.js中使用三目运算符根据isActive变量的值动态设置按钮的class，当isActive等于特定值时激活样式。点击按钮会触发方法并传递参数，更新isActive的值，实现按钮或导航栏的高亮效果。

1.三目运算符，:class=" isActive==‘aaa’ ? ‘isActive’ : ‘’ "，@click=“toggle(‘aaa’)”。判断isActive是否等于aaa，相等 -> class=“isActive”，不等 -> class=’’，点击的时候带上实际的参数

<el-button :class=" isActive=='月' ? 'isActive' : '' " @click="monthGasVolume('月')">月</el-button>
<el-button :class=" isActive=='周' ? 'isActive' : '' " @click="weekGasVolume('周')">周</el-button>

铵钮在这里插入图片描述
导航栏

2.script中的data中isActive默认为“周”

 isActive:'周'

按钮在这里插入图片描述
或导航
3.点击按钮或导航栏，把参数赋值给isActive，该按钮或导航栏添加样式
按钮

或导航

4.动态添加class=“isActive”
在这里插入图片描述

5.效果如下:
按钮在这里插入图片描述
导航栏