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{
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样式消失问题的更多相关文章
- 使用Android点击按钮跳转页面
1.首先新建一个Android工程,命名为MyApp(名字可以自己随意起); 2.以原有的MainActivity.java文件为登录界面,然后在src文件中的包上面右击选择New目录下的Other中 ...
- mui中confirm在苹果出现bug,confirm点击确定跳转页面再返回后,页面被遮罩盖住无法使用
项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...
- 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。
一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...
- Vue路由守卫(跳转页面置顶的处理方)
在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...
- iOS极光推送 点击推送消息跳转页面
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...
- jq 鼠标点击跳转页面后 改变点击菜单的样式代码
点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...
- vue 跳转页面返回时tab状态有误的解决办法
一.前言 最近在做新vue项目的时候遇到了一个问题,就是tab间的切换没有问题,当跳转到其他页面时,且这个页面并非子路由,再用浏览器的返回按钮返回首页时,tab的active始终指向默认的第一个选项. ...
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...
- react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路
一.react-navigation的初使用 createStackNavigator ==> createSwitchNavigator ==> createAppContaine ...
随机推荐
- jQuery--后台主机列表编辑
先看效果: 要求: 全选,反选和取消 编辑模式下的全选,反选和取消 编辑模式下单选进入编辑状态,取消退出编辑状态 表格元素有可编辑,不可编辑,下拉选择 按住ctrl选择下拉框,下面的同列选项都随之改变 ...
- 26.COUNT() 函数
COUNT() 函数返回匹配指定条件的行数. SQL COUNT() 语法 SQL COUNT(column_name) 语法 COUNT(column_name) 函数返回指定列的值的数目(NULL ...
- MYSQL优化——索引覆盖
索引覆盖:如果查询的列恰好是索引的一部分,那么查询只需要在索引文件上进行,不需要进行到磁盘中找数据,若果查询得列不是索引的一部分则要到磁盘中找数据. 建表: create table test_ind ...
- c# 二分查找法(2分钟算法)
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- jqentitydetail
using System;using System.Collections;using System.Collections.Generic;using System.Linq;using Syste ...
- ROW_NUMBER分页
var query = string.Format("SELECT {0} FROM (SELECT ROW_NUMBER() OVER (ORDER BY {3}) AS RowNum, ...
- (转)mongodb学习(翻译1)
原文地址:http://www.cnblogs.com/Johnzhang/archive/2013/09/10/3313582.html 学习mongodb,试着翻译写,英语能力有限,希望大家指正, ...
- Android绘图之Matrix
一.概述 1. 在Android中,如果你用Matrix进行过图像处理,那么一定知道Matrix这个类.Android中的Matrix是一个3 x 3的矩阵,其内容如下 2.Matrix的对图像的处理 ...
- 以太坊系列之三: 以太坊的crypto模块--以太坊源码学习
以太坊的crypto模块 该模块分为两个部分一个是实现sha3,一个是实现secp256k1(这也是比特币中使用的签名算法). 需要说明的是secp256k1有两种实现方式,一种是依赖libsecp2 ...
- 灯塔AOI简易实现
首先我们来讨论下游戏开发中的几个坐标系,为了方便解释,我截取了灯塔AOI DEMO当NPC数目为0时候的样子(代码地址觉得有帮助的童鞋记得给我代码点个星^_^) 先对这张图简单说明下: 蓝色的坐标轴表 ...