Vue之(class与v-bind) : CSS点击Active类样式,以及页面加载第一个就有默认样式Active实战采坑篇...

最新推荐文章于 2025-06-17 23:22:51 发布

转载最新推荐文章于 2025-06-17 23:22:51 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c4a9062e51d4556940c0dd0

文章标签：

#javascript #ui #ViewUI

本文介绍了一个使用MUI框架实现TabBar动态激活效果的示例。通过Vue.js结合MUI，实现了点击TabBar子元素时的蓝色高亮效果，并详细解释了如何在页面加载时自动为第一个子元素绑定激活状态。此示例适用于前端开发者学习MUI与Vue.js的结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在有这么需求,看效果图,大家都秒懂!

我这边ui模板用的mui的,点击每个tabbar的儿子div,有蓝色

代码如下:

<template>
    <div>
         <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted myca">
    <div class="mui-scroll">
        <a :class="['mui-control-item',{'mui-active':index==item.id||index==0}]" v-for="(item,index) in tabarList" :key="item.id">
            {{item.name}}
        </a>
    </div>
</div>   
    </div>
</template>
复制代码

tabarList是ajax返回过来的数组,然后绑定到data的tabarList里面,然后需要绑定key,如果是渲染展示,不操作的列表是不需要key的,添加,删除等操作都需要绑定key,养成好习惯,还是加上key吧,这边key绑定的ajax的id值,然后重头戏来了! 因为mui-control-item是不变的,mui-active是变的,所以这边采用数组格式包对象,数组方括号[],对象花括号{}. 然后我们在 {'mui-active':index==item.id||index==0}],这边判断的条件是当前点击的index和后台的id 是否相等,但是还没完,因为我们要页面一加载,就要给第一个div儿子绑定上active,所以这边弄个||让index为0,这边我是考感觉的,自己瞎搞的,就出来了.....