<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. 在Win7 64位电脑上安装Sql Server 2008 R2 Express

    安装环境说明: 操作系统:Win7 64位 英文版 安装步骤: 1.准备安装文件 下载网址:https://www.microsoft.com/zh-CN/download/details.aspx? ...

  2. SqlServer——用户定义函数

    根据用户定义函数返回值的类型,可将用户定义函数分为如下三个类别: (1) 返回值为可更新表的函数 若用户定义函数包含单个 SELECT 语句且该语句可更新,则该函数返回的表也可更新,这样的函数称为内嵌 ...

  3. Auto Control 001 自动控制的一般概念

    自动控制的基本概念 一 . 自动控制系统的组成 自动控制装置:自动控制装置的组成当中涉及到了这样这样一些东西: 第1,需要有被控对象,那么这些被控对象需要有谁来控制呢?一定要有控制器,这些控制器,我们 ...

  4. c#事务的使用、示例及注意事项

    什么是数据库事务 数据库事务是指作为单个逻辑工作单元执行的一系列操作. 设想网上购物的一次交易,其付款过程至少包括以下几步数据库操作: · 更新客户所购商品的库存信息 · 保存客户付款信息--可能 ...

  5. 2.3.2 volatile 说明

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...

  6. Python基础入门-字符串

    字符串详解 字符串的用法是最多的,很多功能的实现都离不开字符串,而且字符串的使用方法也很多,这里面不能说全部给大家一一介绍,只能说把一些常用的列举出来,方便回忆或者说供大家参考,谢谢!请继续往下看~~ ...

  7. bufferedReader与StringReader

    bufferedReader 这么说吧,这个类就是一个包装类,它可以包装字符流,将字符流放入缓存里,先把字符读到缓存里,到缓存满了或者你flush的时候,再读入内存,就是为了提供读的效率而设计的. S ...

  8. Android ViewPager + Fragment的布局

    ViewPager And Fragment 1.之前有篇博客是讲ViewPager的用法的:http://www.cnblogs.com/liangstudyhome/p/3773156.html ...

  9. mysql 新建数据库与表

  10. vs2015+opencv3.3.1 实现 c++ 灰度高斯滤波器

    #include <opencv2\highgui\highgui.hpp> #include <iostream> #include<vector> using ...