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

<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{
    isSelect: ‘senUs‘,
    nav: [
      {title: ‘senUs‘},
      {title: ‘senGermany‘},
      {title: ‘senFrance‘},

      {title: ‘senUk‘}
    ]
  }
},

methods:{
  selectNav (title) {
     var that=this;
     this.$nextTick(function(){
        that.isSelect = that.$route.name
     })
    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
    }
  }
 },
 mounted(){
    this.isSelect = this.$route.name;
 },
.nij{
    p{
        line-height:30px;
    }
}
.active{
  color: #ffd100;
} 

原文地址:https://www.cnblogs.com/rachelch/p/8320437.html

时间: 2024-08-30 00:18:15

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

使用Android点击按钮跳转页面

1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中的Android Activity,选择BlankActivity,修改一个Activity的名字(自定义),我这里命名为BankActivity,点选finish然后新建完成一个返回页面;\ 3.接下来就要添加布局文件了,我们在res文件下的layout文件里先双击activity_main.xm

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

一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key=value&key=value"            用&可以实现传递多个值. 通过这种方式就把要传递的值传到要跳转的页面去了. 2.跨页面取值: 在跳转到的页面的C#代码服务端进行取值 用:  string value = Request["key"]; 二.

OS X开发点击按钮跳转页面问题

本萌新刚学习到如何os x跳转页面 先创建一个项目 选择os x 创建一叫skip的项目 打开Mai.storyboard,拉入一个view controller 拉入一个button ,然后按着control 然后显示出,我选择modal,(这些你们慢慢试,我也不太知道) 选择后就会出现 点击button 就会出现新的窗口

0812邮箱问题解决:主页点击不跳转页面在本页面显示

先设内容不可见,电机的时候被点击的那个内容显示

鼠标点击和键盘点击自动跳转页面

$(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.njxblog.com')},2000);  //定时不太好使,会被浏览器当成广告的 i++; }; var j = 0; document.onkeydown=functi

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

文章来自:http://www.jianshu.com/p/eaf07c4372a8 AppDelegate.m - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { #if __IPHONE_OS_VERSION_MAX_ALLOWED > __IPHONE_7_1 if ([[UIDevice currentDevice].s

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

点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" src="../images/c_bg01.gif" /> <ul> <a href="x_bumen.php"><li>部门设置</li></a> <a href="x_yhshez

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

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo,但是博客中的这个案例被我删掉了,我只好随手写了一个超简单的 demo,希望能有所帮助 链接: https://pan.baidu.com/s/1pMfi5tD  密码: pjwx 这

点击按钮后实现页面跳转

<button onclick="location.href='http://www.baidu.com';">点我跳转</button> 点击按钮后实现页面跳转,码迷,mamicode.com