解决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 相关文章推荐
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
js转义字符介绍
Nov 05 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
ES6 解构赋值的原理及运用
May 25 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
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python类反射机制使用实例解析
2019/12/30 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
英语自我评价范文
2014/01/24 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
党支部特色活动方案
2014/08/20 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书