使用vue给导航栏添加链接
如下面的导航栏,使用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给导航栏添加链接的更多相关文章
- UIBarButtonItem导航栏添加按钮
1 前言 UIBarButtonItem为导航栏按钮,在导航栏的左侧和右侧,他们具有许多种不同的形状和形式. 2 代码讲解 ZYViewController.m [plain] (void)view ...
- 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)
超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...
- 记一次Vue跨导航栏问题解决方案
简述 这篇文章是我项目中,遇到的一个issue,我将解决过程和方法记录下来. 本篇文章基于Vue.js进行的前端页面构建,由于仅涉及前端,将不做数据来源及其他部分的叙述.使用的CSS框架是 Boots ...
- Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件
基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...
- vue组件导航栏动态添加class
- Vue设置导航栏为公共模块并在登录页不显示
1.公共模块的内容可以放在App.vue中但是通常登录页面是不需要导航的,那么就需要规避登录页这时,就可以采用keep-alive结合$route.meta来实现这个功能.keep-alive 是 V ...
- 利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式
具体的样式有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: 在CODE上查看代码片派生到我的代 ...
- vue 侧边导航栏递归显示
import axios from "axios"; import tabs1 from "../tab_content/tab1.vue"; import m ...
- zblog实现后台导航栏增加链接功能的最简单方法
首先在ftp中找到这个目录 zb_system/admin/ 然后找到 admin_top.php 这个文件 再然后找到这行代码 <?php ResponseAdm ...
随机推荐
- swift 闭包循环引用
当使用闭包时,类本身持有self,然后又在闭包中访问了self或者self的属性,就会导致恶心额循环引用.swift提供的解决方法是在闭包中定义捕获列表,捕获列表是闭包想怎么引用捕获来的变量.例如下面 ...
- kafka 订单应用需求
kafka的介绍就不说了,网上会找到一大堆. 为了公司做报表需要对卡券订单的销售情况做总结,所以每次下单的时候都要给卡券活动模块传递一次消息,并把订单的信息发送给活动,活动做相应的数据操作,因为数据量 ...
- select2插件
引入select2插件<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min. ...
- sql 日期格式输出 - 转
SELECT CONVERT(varchar(100), GETDATE(), 0) 05 9 2011 9:12AM SELECT CONVERT(varchar(100), GETDATE(), ...
- ios http请求
1.同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, 2.异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然 ...
- Maven基础知识(转)
文章摘自http://www.cnblogs.com/xing901022/p/4170248.html 谢谢楼主的总结,界面设计的很好看! 一.什么是Maven Maven是一个用于项目构建的工具, ...
- Maven项目pom.xml文件详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- go语言让windows发出声音,或者播放音乐
go语言让windows发出声音,或者播放音乐的例子:会发出alert警告的声音 ( 这是我应群员的求助写的, 如果你需要了解其中的调用原理或过程 或更多go语言调用win32api的资料,加群: 2 ...
- Java语言的安全性的体现
Java语言的安全性的体现 1.严格遵循面向对象的规范.这样封装了数据细节,只提供接口给用户.增加了数据级的安全性. 2.无指针运算.java中的操作,除了基本类型都是引用的操作.引用是不能进行增减运 ...
- dis进行反编译
摘录自官方文档: https://docs.python.org/2/library/dis.html 回头自己也脑补下. 可以使用dis查看自己代码的复杂度之类的东西. 比如while 1 和whi ...