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 ...
随机推荐
- 面试题:Java多线程必须掌握的十个问题 背1
一.进程与线程?并行与并发? 进程代表一个运行中的程序,是资源分配与调度的基本单位.进程有三大特性: 1.独立性:独立的资源,私有的地址空间,进程间互不影响. 2.动态性:进程具有生命周期. 3.并发 ...
- WEB测试和APP测试区别
Web测试和App测试从流程上来说,没有区别.都需要经历测试计划方案,用例设计,测试执行,缺陷管理,测试报告等相关活动.从技术上来说,WEB测试和APP测试其测试类型也基本相似,都需要进行功能测试.性 ...
- (回溯法)ip地址的合理性
题目: 给定一个只包含数字的字符串,通过返回所有可能有效的IP地址组合来恢复它. 例如: 给定“”, return [“255.255.11.135”,“255.255.111.35”]. (顺序无所 ...
- 前端mock利器:randomjson
randomjson的应用场景 前后端分离时,前端根据后端提供的数据模型模拟后端请求.如果数据写死,每次返回的都一样,这个时候randomjson就能派上用场了.在前端规定数据类型,每次用random ...
- web大文件上传控件-设置附加参数-Xproer.HttpUploader6
自定义附加字段在up6.js中定义,也可以不用定义: 注意: 1.附加字段必须是字符串类型. 2.如果附加字段的值包含中文,在上传前必须使用encodeURIComponent进行编码. 在引 ...
- PROC程序设计
通过在过程化编程语言中嵌入SQL语句而开发出的应用程序称为Pro程序. 在C/C++语言中嵌入SQL语句而开发出的应用程序称为Pro*C/C++程序. –在通用编程语言中使用的SQL称为嵌入式SQL: ...
- oracle列出两个日期间所有日期
select date '2010-1-1'+level-1 dates from dual connect by level <date '2010-1-10' -date '2010-1-1 ...
- Android Studio2.3更换默认的ConstraintLayout布局
1.在as安装目录\plugins\Android\lib\templates\activities\common\root\res\layout下,找到simple.xml.ftl文件 2.用以下布 ...
- js $.inArray
var arr = [ "xml", "html", "css", "js" ]; $.inArray(" ...
- svm的第一个实例
用的数据集是uci机器学习库的数据 ‘iris.data’ from sklearn import svm import csv from sklearn.model_selection import ...