解决vue-router 二级导航默认选中某一选项的问题


Posted in Javascript onNovember 01, 2019

现在有一个需求是这样的:

解决vue-router 二级导航默认选中某一选项的问题

这个需求很正常吧! 二级导航条,不是二级路由的(如果是二级路由是用linkActiveClass来做,我之前文章说过),是单纯获取数据的按钮,当这个页面出现时,默认选中第一项。

首先:

解决vue-router 二级导航默认选中某一选项的问题

解决vue-router 二级导航默认选中某一选项的问题

解决vue-router 二级导航默认选中某一选项的问题

上面的判断的意思是:如果你点击某一个选项把这个index传过去,activeName等于那一个传过来的index(index是遍历出来的数据如:1,2,3,4,5),就显示该个active或者index==pid,pid默认为0,所以index==0,就是默认第一个选项被选中。

但是当我点击其它项的时候,要把那个pid改为false,只能把这个false赋值给uid,uid却不能在data里而声明,因为组件遍历v-for是时候就默认执行了selected()这个函数,所以只能把这个赋值给全局

解决vue-router 二级导航默认选中某一选项的问题

我目前只能用这个方法解决这个问题,如果有更好的方法,希望可以共享一下

以上这篇解决vue-router 二级导航默认选中某一选项的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
javascript 自定义事件初探
Aug 21 Javascript
Jquery 扩展方法
May 06 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
编写v-for循环的技巧汇总
Dec 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
微信小程序定义和调用全局变量globalData的实现
Nov 01 #Javascript
You might like
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
vuex入门最详细整理
2020/03/04 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python如何使用函数做字典的值
2019/11/30 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
python re模块常见用法例举
2021/03/01 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
酒店前厅员工辞职信
2014/01/08 职场文书
科技之星事迹材料
2014/06/02 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
单位作风建设自查报告
2014/10/23 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
高一军训感想
2015/08/07 职场文书
导游词之广西漓江
2019/11/02 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android
php实现自动生成验证码的实例讲解
2021/11/17 PHP