使用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 ...
随机推荐
- Directory 与 DirectoryInfo 的区别
Directory 与 DirectoryInfo 这两个能够实现大多数相同的功能.区别可分为两点:一.静态与实例调用前者必须被实例化后才能使用,而后者则只提供了静态的方法.如果多次使用某个对象一般使 ...
- 堆排序C++实现
/* * heapsort.cpp * * Created on: 2016年3月30日 * Author: Lv_Lang */ //堆排序 #include <iostream> us ...
- java 接口
1.接口的引出:发现没有继承关系的类也能共享行为 2.接口不是类,类描述对象的属性和行为,但是接口只关注实现的行为3.当我们发现有行为在多个没有继承关系的类中共享,我们要把它抽取到接口中,而不是写到父 ...
- HDU 5113 dfs剪枝
题意:告诉格子规格,颜色个数,以及每个颜色能涂得格子数目,问是否能够实现相邻两个格子的颜色数目不相同. 分析:因为数据很小,格子最多是5 * 5大小的,因此可以dfs.TLE了一次之后开始剪枝,31m ...
- html 涂改图片功能实现
网页源码直接贴了: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- GCD: 基本概念和Dispatch Queue 【转】
什么是GCD? Grand Central Dispatch或者GCD,是一套低层API,提供了一种新的方法来进行并发程序编写.从基本功能上讲,GCD有点像 NSOperationQueue,他们都允 ...
- android view : 绘制
说到绘制,其实就是如何把一个view的对象,变成手机上可视的图形.很多人总结3个过程:测量,布局,绘制.这也是所有的要显示图形的程序所应该抽象的3个步骤,测量就是测量出你view的大小,布局就是要显示 ...
- C++开发过程多线程同步lock的实现
在程序开发过程经常使用到多线程,而多线程始终与锁存在紧密地联系,以下详细的介绍如何在C++程序开发过程中自定义锁的几种方法. 1. 下面给出一段代码展现如何通过Mutex实现锁的功能(window p ...
- LPTHW 笨办法学python 37章 python关键字/关键词介绍
本章简要的介绍了各种关键词: and:[布尔运算]且 del: 删除变量(函数,类) from: 从某一个库或者文件读取 not:[布尔运算]非 while: while-loop 关键字,后跟循环条 ...
- 关于IIS服务器证书续订
输入办证机构+服务器名或IP 办证机构可以通过certsrv.msc来查看 输入完后点完成