vue---给li标签设置active选中样式

最新推荐文章于 2024-04-13 13:52:49 发布
最新推荐文章于 2024-04-13 13:52:49 发布
阅读量4.4k 收藏 9
点赞数 4
分类专栏： vue CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maidu_xbd/article/details/106941130
版权
vue 同时被 2 个专栏收录
107 篇文章 9 订阅
订阅专栏
CSS
26 篇文章 1 订阅
订阅专栏

关键点：添加【:class="active == index ? 'isActive' : ''"】

具体见下图：

在data中，设置active初始值为-1【  active: -1】

 

maidu_xbd
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router为激活的路由设置样式操作
11-20
本文将详细讲解如何为Vue Router中的激活路由设置样式，以及解决子页面中`router-link`对应的导航栏激活样式问题。 首先，我们要为激活的路由设置样式，通常我们会在CSS中定义一个特定的类，比如`active`。这个类将...
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
10-18
在Vue.js开发中，我们经常使用Vue CLI作为项目的初始化工具，因为它...例如，可以为每个导航项设置一个`active`状态，并在路由变化时更新这个状态。这样，无论用户处于哪个子路由，导航都能正确反映出当前的路由路径。
vue3＜script setup＞中点击li为当前li添加一个类名active
最新发布
HWL5679的博客
04-13 413
:class="{ active: currentIndex === index }"是一个对象语法，用于动态绑定类名。
vue-router的Active-class问题
高源的博客
12-18 1442
一、首先，active-class是什么， active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换； 相关可查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html 二、在vue-router中要使用active-class有两种方法： 1、直接在路由js文件中配置li...
vue2 vue-cli vue-router vuex
triggerV的博客
03-08 954
Vue是一款基于MVVM架构的渐进式框架，它主要用于构建单页面应用SPA，它的特点有声明式渲染、响应式两大点。
vue学习笔记-点击li给当前li添加背景色（3）
键指江湖的博客
09-06 2737
vue 给当前li添加背景色 思路1：循环li列表并且获取到当前li的索引值 看代码： <div id="app"> <h1>{{ msg }}</h1> <input type="text" v-model="msg"> <button v-on:click="getMsg()">获取表单数据</butto...
vue-admin-element项目分析与难题解决
kilito_01的博客
03-09 1009
vue-admin-element项目分析与难题解决
vue中使用双重v-for循环列表，点击元素设置active样式
weixin_37833344的博客
12-24 1386
html结构 <div class="header"> <dl v-for="(item,parentIndex) in mediaData" :key="parentIndex"> <dt>{{item.itemname}}:</dt> <dd> <a href="javascript:;" @click="addStyle(c.
Vue路由中的router-link-exact-active和router-link-active
zyz00000000的博客
03-21 1万+
1.router-link-exact-active和router-link-active这两个类名是Vue路由自带的 （1）router-link-exact-active 当路由到哪里时，该类名就添加到对应的路由标签上 比如：当点击About时，路由就跳转到About对应的页面 此时，看该路由标签的类名： （2） 当点击Community的子路由时，该类名就会到子路由上 ...
vue-router仿天猫底部导航栏
木雷双雄7
10-17 1万+
首先把天猫的导航贴出来，里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。 分析： 1、图标的获取 进入阿里巴巴矢量图标库，网址http://www.iconfont.cn。 点击官方图标库，选择天猫图标库，选中放入购物车。 点击添加至项目，点击创建新项目按钮，创建tianmao项目，点击确定。 此时会有查看在线链接和下载至本地两种方式，我选择第一种，因为后
Vuejs第五篇（vue-router路由和tabbar）
m0_57249797的博客
10-06 903
一、vue-router-安装和配置方式 二、路由映射配置和呈现出来 三、路由的默认值和修改为history模式 四、router-link的其他属性补充 五、通过代码跳转路由 六、vue-router-动态路由的使用 七、vue-router-打包文件的解析 八、vue-router-路由懒加载的使用 九、vue-router-路由的嵌套使用 十、vue-router-参数传递一 十一、vue-router-参数传递二 十二、vue-router-router和route的由来 十三、vue-router
基于vue-cli 路由 实现类似tab切换效果（vue 2.0）
01-19
1，更改main.js 2，在App.vue中，写入两个跳转链接（router-link），分别跳转到“home”“About” （home...—-.router-link-active这个class，是当路由path指向当前组件时自动生成的，可以在此处设置样式（选中状态）
vue-router二级导航切换路由及高亮显示的实现方法
10-16
在Vue.js应用中，路由管理是一个关键组成部分，特别是在构建大型单页应用时。Vue Router是官方推荐的路由库，它允许我们定义动态和嵌套路由，实现导航和页面间的平滑过渡。本篇文章将深入探讨如何在Vue Router中实现...
vue---style scoped属性的作用和原理、scoped穿透
热门推荐
maidu_xbd的博客
05-26 1万+
使用vue开发项目时，发现style标签中存在一个属性scoped。 scoped 属性是 HTML5 中的新属性，是一个布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。 作用：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。 原理：scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性，即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到样式私有化，不污染全局的作用。 scope
vue---el-input样式覆盖
maidu_xbd的博客
04-04 1万+
input输入框定义如下 <el-input id="dialog_input" style="margin-left:20px;" class="dialog-input-text" type="input" autosize v-model="dialogInput" ref="dialogInput" >...
CSS---父div 跟随子div移动解决方法
maidu_xbd的博客
04-03 4152
最近在做小项目时，出现以下布局问题： 布局图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
CSS---在线使用iconfont字体图标
maidu_xbd的博客
06-10 1933
iconfont阿里巴巴矢量库https://www.iconfont.cn/ 在线使用iconfont具体方式如下： （1）https://www.iconfont.cn/登录自己的账号 （2）搜索图标，加入购物车，全部图标加入购物车完毕后点击购物车，添加至相应的项目 （3）点击【FontClass】【查看在线链接】【暂无代码，点击生成】 （4）在项目中引入 注意：每次增加或编辑之后icon库一定要更新链接！！！ ps:在浏览器窗口输入【http://at..
CSS---解决元素浮动导致的父元素高度塌陷的问题
maidu_xbd的博客
04-25 1624
元素浮动的特点: （1）元素浮动以后会完全脱离文档流，浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动。 （2）如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素。 （3）浮动元素不会超过它上边的浮动的兄弟元素，最多一边齐。 （4）浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果。 （5）块元素脱离文档...
vue router-link设置样式
09-10
### 回答1： Vue中的router-link组件可以通过设置class或active-class属性来设置样式。 1. 设置class属性 可以通过设置class属性来为router-link添加样式，例如： ``` <router-link to="/" class="link">首页</router-link> ``` 这样就为router-link添加了一个名为link的class样式。 2. 设置active-class属性 active-class属性可以用来设置当前激活的router-link的样式，例如： ``` <router-link to="/" active-class="active">首页</router-link> ``` 这样当当前路由为"/"时，router-link会自动添加一个名为active的class样式。 以上就是Vue中设置router-link样式的方法。 ### 回答2： 在Vue中，可以通过router-link组件来进行页面间的跳转，并且可以设置样式来美化链接的外观。 首先，在使用router-link时，可以通过标签属性来设置样式。如下所示： <router-link to="/home" tag="li" active-class="active"> <a>Home</a> </router-link> 在以上代码中，通过设置tag属性为"li"，router-link会以li标签的形式渲染，然后可以在li标签上添加样式。例如，可以给li标签设置背景色或者字体颜色等。 另外，添加active-class属性可以设置链接在当前页面激活时的样式。在以上代码中，当链接指向"/home"路径时，会自动给这个链接添加active类，因此我们可以通过设置active类的样式来美化激活状态下的链接样式。 除此之外，还可以通过指定css类名的方式来设置样式。如下所示： <router-link to="/home" :class="{ 'active': $route.path === '/home' }"> <a>Home</a> </router-link> 在以上代码中，通过绑定class属性，可以根据$route.path的值来动态添加active类，从而设置激活状态下的样式。 总结起来，Vue中的router-link组件可以通过设置标签属性或者绑定class属性的方式来设置样式。通过灵活运用这些方法，可以轻松地美化链接的外观。 ### 回答3： 在Vue中，可以通过添加class、设置active-class和exact-active-class来设置vue-router中的router-link的样式。 1. 添加class: 可以通过设置class来自定义router-link的样式。在router-link组件中，可以通过使用该组件的"to"属性来指定链接的目标路径，并通过添加class属性来设置该router-link的样式。例如： ``` <router-link to="/home" class="my-link">Home</router-link> ``` 上述代码中，router-link的class属性被设置为"my-link"，可以在CSS文件中定义.my-link类来设置该router-link的样式。 2. 设置active-class和exact-active-class: 当我们在Vue中使用router-link组件时，根据当前路由是否匹配到了router-link的to属性的值，router-link会添加active class来表示当前选中的链接。我们可以通过设置active-class和exact-active-class来自定义active的样式。 - active-class: 当路由匹配到router-link的to属性时，router-link会自动添加active class。可以通过设置active-class属性来指定active的样式。例如： ``` <router-link to="/home" active-class="active-link">Home</router-link> ``` 上述代码中，router-link在匹配到"/home"路径时，会自动添加active class，并且该class被设置为"active-link"，可以在CSS文件中定义.active-link类来设置active的样式。 - exact-active-class: 如果我们不希望子路由也被认为是active状态，可以使用exact属性来确保只有完全匹配时才被认为是active状态。同时，可以通过设置exact-active-class属性来自定义exact-active的样式。例如： ``` <router-link to="/home" exact active-class="exact-active-link">Home</router-link> ``` 上述代码中，router-link在完全匹配到"/home"路径时，会自动添加exact-active class，并且该class被设置为"exact-active-link"，可以在CSS文件中定义.exact-active-link类来设置exact-active的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值