如下面的导航栏,使用vue技术给该导航栏增加链接:

js代码为:

navigation:function(){
new Vue({
el: '#navUl',
data: {
menuData:{
'个人首页':'personal-home.html',
'人才分析':'personal-analysis.html',
'基本信息':'personal-info-base.html',
'技能态度':'skill-attitude.html',
'参与项目':'involved-project.html',
'学习':'learn.html',
'考勤':'work-attend.html',
'生活福利':'welfare.html'
}
},
computed:{
curIdx:function(){
var curIdx = 0;
$.each(this.menuData,function(k,v){
if(location.pathname.indexOf(v)!=-1){//说明包括(也就是当前页面)
return false;
}else{//==-1说明不包括(不是当前页面)
curIdx++;
}
});
console.log(curIdx);
return curIdx;
}
}
});
}

html代码为:

<ul class="nav-ul" id="navUl">
<template v-for="(link,name,index) in menuData">
<li class="nav-li" v-bind:class="index==curIdx?'curr':''"><a :href="link">{{ name+'--'+index }}</a></li>
</template>
</ul>

说明:思路是,每一页都对应着一个index值,举例来说:当切换到基本信息页时,index=2,此时如果curIdx也等于2,那么index==curIdx,增加curr类,文字变红,而页面跳转是给文字增加了链接,不是点击事件造成的;

因此切换到个人首页时,curIdx==0;切换到人才分析页时,curIdx==1;切换到基本信息页时,curIdx==2;以此类推;

对于基本信息页:js文件中,循环this.menuData,首先当前链接不包括第一个链接personal-home.html的内容,所以location.pathname.indexOf(v)==-1,此时curIdx由0增加为1;

然后第二次循环,当前链接不包括第二个链接personal-analysis.html的内容,所以location.pathname.indexOf(v)==-1,此时curIdx由1增加为2;

然后第三次循环,当前链接包括第三个链接personal-info-base.html的内容,所以location.pathname.indexOf(v)!=-1,此时return出false,curIdx==2;

也就是说基本信息页的curIdx为2;此时index==curIdx,为当前增加curr类名;

使用vue给导航栏添加链接的更多相关文章

  1. UIBarButtonItem导航栏添加按钮

    1 前言 UIBarButtonItem为导航栏按钮,在导航栏的左侧和右侧,他们具有许多种不同的形状和形式. 2 代码讲解 ZYViewController.m [plain]  (void)view ...

  2. 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

    超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...

  3. 记一次Vue跨导航栏问题解决方案

    简述 这篇文章是我项目中,遇到的一个issue,我将解决过程和方法记录下来. 本篇文章基于Vue.js进行的前端页面构建,由于仅涉及前端,将不做数据来源及其他部分的叙述.使用的CSS框架是 Boots ...

  4. Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

    基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...

  5. vue组件导航栏动态添加class

  6. Vue设置导航栏为公共模块并在登录页不显示

    1.公共模块的内容可以放在App.vue中但是通常登录页面是不需要导航的,那么就需要规避登录页这时,就可以采用keep-alive结合$route.meta来实现这个功能.keep-alive 是 V ...

  7. 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式

    具体的样式有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: 在CODE上查看代码片派生到我的代 ...

  8. vue 侧边导航栏递归显示

    import axios from "axios"; import tabs1 from "../tab_content/tab1.vue"; import m ...

  9. zblog实现后台导航栏增加链接功能的最简单方法

    首先在ftp中找到这个目录   zb_system/admin/ 然后找到    admin_top.php      这个文件 再然后找到这行代码      <?php ResponseAdm ...

随机推荐

  1. 开源一个网络图片浏览器HooPhotoBrowser

    在公司开发项目中需要弹出展示从网络上下载的图片,并提供滑动展示功能.目前采用同事开发的图片浏览器,后期有时间想优化一下.所以重温了下以前开发的类似微博的项目中的图片浏览器代码,并抽取出来封装成了现在这 ...

  2. python获取指定时间段内的随机不重复的时间点

    上篇 <python时间时分秒与秒数的互相转换>http://www.cnblogs.com/gayhub/p/6154707.html 提到了把时间转成秒数的方法, 这篇写写转换成秒数后 ...

  3. freeswitch:error C2220: 警告被视为错误 - 没有生成“object”文件

    项目 -> 属性-> 配置属性 -> c/c++ -> 将警告视为错误 -> 否 参考: http://www.cnblogs.com/kex1n/archive/201 ...

  4. 最新Xcode7.x环境下上架iOS App到AppStore 完整流程

    最新Xcode7.x环境下上架iOS App到AppStore 流程  part 1 前言部分 之前App要上架遇到些问题到网上搜上架教程发现都是一些老的版本的教程 ,目前iTunesConnect ...

  5. 黑马程序员——【Java高新技术】——案例:交通灯管理系统

    ---------- android培训.java培训.期待与您交流! ---------- 一.交通灯管理系统的项目需求 Ø 异步随机生成按照各个路线行驶的车辆 例如: 由南向而来去往北向的车辆 - ...

  6. 【转】javascript变量声明 及作用域

    javascript变量声明提升(hoisting) javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看 ...

  7. 如何理解meta标签

    相信大家对meta标签都不陌生,但是打开某些网页源代码看到一堆的meta难免一脸蒙逼.废话少说,请大家更随我一起探索meta标签都有哪些属性以及作用. W3C给meta标签的定义是:<meta& ...

  8. 关于peersim样例配置文件的超详细解读(新手勿喷)

    相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配 ...

  9. OD20

    查壳   发现没有壳          那就载入OD 在命令中在API函数下下个断点 然后程序跑起来 ,   点CHECK  断下来了 在动态链接库断下来了      我们alt+F9   回到用户界 ...

  10. pylot是一款开源的web性能测试工具

    pylot是一款开源的web性能测试工具,http://www.pylot.org/ 参考文档:http://www.pylot.org/gettingstarted.html很容易上手 使用分为以下 ...