vue 导航内容设置选中状态样式的例子

 更新时间:2019年11月01日 17:01:59   作者:Web攻城狮-前端  
今天小编就为大家分享一篇vue 导航内容设置选中状态样式的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如图所示,我们一般需要切换的时候选中导航给个active样式,

而router-link 标签 在选中的时候  会自动给整个标签添加一个 router-link-active的class

可给router-link 标签里面的span、i标签如下设置,非常简单,下面是stylus的写法,不需要的话也可以写成平时的css写法

.router-link-active
  span
  i
   color: red

以上这篇vue 导航内容设置选中状态样式的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于在Vue中import和require的用法分析

    关于在Vue中import和require的用法分析

    在Vue项目中,我们经常需要引入外部的模块或文件,这时候就会用到import和require这两个关键字,本文将详细分析它们的用法,并提供具体的代码实例和解释,需要的朋友可以参考下
    2023-06-06
  • 区分vue-router的hash和history模式

    区分vue-router的hash和history模式

    这篇文章主要介绍了区分vue-router的hash和history模式,帮助大家更好的理解和学习vue路由,感兴趣的朋友可以了解下
    2020-10-10
  • 解决vue3 defineProps 引入定义的接口报错

    解决vue3 defineProps 引入定义的接口报错

    这篇文章主要为大家介绍了解决vue3 defineProps 引入定义的接口报错详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue使用xlsx库和xlsx-style库导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽

    vue使用xlsx库和xlsx-style库导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽

    xlsx是由SheetJS开发的一个处理excel文件的npm库,适用于前端开发者实现导入导出excel文件的经典需求,这篇文章主要介绍了vue使用xlsx库和xlsx-style库导入导出excel、设置单元格背景色、文字居中、合并单元格、设置列宽,需要的朋友可以参考下
    2023-11-11
  • vue.js学习笔记之v-bind和v-on解析

    vue.js学习笔记之v-bind和v-on解析

    这篇文章主要介绍了vue.js学习笔记之v-bind和v-on解析,v-bind 指令用于响应地更新 HTML 特征,v-on 指令用于监听DOM事件,文中还给大家提到了v-bind,v-on的缩写,感兴趣的朋友参考下吧
    2018-05-05
  • vue实现标签云效果的示例

    vue实现标签云效果的示例

    这篇文章主要介绍了vue实现标签云效果的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vue Element-ui实现树形控件节点添加图标详解

    Vue Element-ui实现树形控件节点添加图标详解

    这篇文章主要为大家介绍了Element-ui实现树形控件节点添加图标,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Element-plus使用中遇到的问题小结

    Element-plus使用中遇到的问题小结

    表格数据是websocket通信获取的数据,首次获取20条数据,以后新增订阅获取一条,新增一条则向上滑动显示最新数据,本文给大家介绍Element-plus使用中遇到的问题小结,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • element-ui重置resetFields()不生效的解决

    element-ui重置resetFields()不生效的解决

    本文主要介绍了element-ui重置resetFields()不生效的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • vue2如何使用vue-i18n搭建多语言切换环境

    vue2如何使用vue-i18n搭建多语言切换环境

    这篇文章主要介绍了vue2-使用vue-i18n搭建多语言切换环境的相关知识,在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言,感兴趣的朋友一起看看吧
    2023-12-12

最新评论