<ul class="nij">
<li v-for="item in nav" @click="selectNav(item.title)">
<p :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p>
</li>
</ul>
     

data:function(){
  return{
    nav: [
      {title: 'senUs'},
      {title: 'senGermany'},
      {title: 'senFrance'},

      {title: 'senUk'}
    ]
  }
},

computed:{

isSelect:function(){

      return this.$route.name;

}

},

methods:{
selectNav (title) {
 switch (title) {
case 'senUs': this.$router.push('/sentiSectors/senUs')
break
case 'senGermany': this.$router.push('/sentiSectors/senGermany')
break
case 'senFrance': this.$router.push('/sentiSectors/senFrance')
break
case 'senUk': this.$router.push('/sentiSectors/senUk')
break
 }
  }
},
.nij{
p{
line-height:30px;
}
}
.active{
color: #ffd100;
}

vue点击tab跳转页面,给点击的tab添加样式,且解决刷新以后点击的tab样式消失问题的更多相关文章

  1. 使用Android点击按钮跳转页面

    1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中 ...

  2. mui中confirm在苹果出现bug,confirm点击确定跳转页面再返回后,页面被遮罩盖住无法使用

    项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...

  3. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  4. Vue路由守卫(跳转页面置顶的处理方)

    在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...

  5. iOS极光推送 点击推送消息跳转页面

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  6. jq 鼠标点击跳转页面后 改变点击菜单的样式代码

    点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...

  7. vue 跳转页面返回时tab状态有误的解决办法

    一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...

  8. Vue 爬坑之路(三)—— 使用 vue-router 跳转页面

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...

  9. react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路

    一.react-navigation的初使用 createStackNavigator  ==> createSwitchNavigator  ==>  createAppContaine ...

随机推荐

  1. c语言实战 BJT时间转化位UTC时间

    题目是这样的: 题目内容: UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果小时小 ...

  2. Glade编程

    一.简介 如果有一种软件能将图形界面的设计及时地展现于开发人员的面前,而且在设计完后能直接看到界面的外观效果,这样就使程序员的主要精力集中于应用程序核心功能的开发上,这就是所谓的可视化编程思想.   ...

  3. 获取HTML元素位置--js学习笔记

    对于不同的元素,不同的浏览器,offsetParent含义不同,有时,指的是直接包含的元素,有时指的是HTML元素,有时不存在offsetParent. 如果所研究的元素没有offsetParent, ...

  4. Luogu 1379 八数码难题

    吐槽:此题就是一点一点卡过去的 警告: 1.千万不能用dfs搜这种东西(dfs需要遍历所有状态才能找到最优解), 分分钟爆炸 2.写结构体的时候要综合判断&的加和不加 Code: // luo ...

  5. 第02章-装配Bean

    1. Spring配置的可选方案 在XML中进行显式配置: 在Java中进行显式配置: 隐式的bean发现机制和自动装配. 2. 自动化装配bean Spring从两个角度来实现自动化装配: 组件扫描 ...

  6. Redesign Your App for iOS 7 之 页面布局【转】

    前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...

  7. java多线程的基本介绍

    Java多线程 1.进程与线程 进程是程序的一次动态执行过程,它需要经历从代码加载,代码执行到执行完毕的一个完整的过程,这个过程也是进程本身从产生,发展到最终消亡的过程.多进程操作系统能同时达运行多个 ...

  8. MQ入门总结(一)消息队列概念和使用场景

    一.消息队列 消息即是信息的载体.为了让消息发送者和消息接收者都能够明白消息所承载的信息(消息发送者需要知道如何构造消息:消息接收者需要知道如何解析消息),它们就需要按照一种统一的格式描述消息,这种统 ...

  9. C# 由范式编程==运算符引发对string内存分配的思考

    今天在看C#编程指南时(类型参数的约束http://msdn.microsoft.com/zh-cn/library/d5x73970.aspx)看到一段描述: 在应用 where T : class ...

  10. 家用wifi信号覆盖增强扩展实用指南

    家用wifi信号覆盖增强扩展实用指南 现在网上很多号称穿墙王的无线路由器,但是一般用起来效果都不理想,其实最主要的原因还是家里面一般每个房间不大,但是墙比较多.并且一般也没有一个所谓的中心点放置路由器 ...