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


Posted in Javascript onNovember 01, 2019

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

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

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

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

.router-link-active
  span
  i
   color: red

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

Javascript 相关文章推荐
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 #Javascript
微信js-sdk 录音功能的示例代码
Nov 01 #Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 #Javascript
vue实现计步器功能
Nov 01 #Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
js canvas实现星空连线背景特效
Nov 01 #Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
You might like
PHP 透明水印生成代码
2012/08/27 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php链表用法实例分析
2015/07/09 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
jQuery前台数据获取实现代码
2011/03/16 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
node网页分段渲染详解
2016/09/05 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python requests post多层字典的方法
2018/12/27 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
小学生期末评语
2014/04/21 职场文书
婚前协议书范本
2014/10/27 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
银行先进个人总结
2015/02/15 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016党员党课心得体会
2016/01/07 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书