vue动态class——实现tag的选中状态
vue动态class——实现tag的选中状态
<template>
<div class="common-nav">
<div class="nav is-flex">
<div class="nav-left">
<router-link to="/" class="nav-left-a" :class="{on: isCurrent('/')}">首页
</router-link>
<router-link to="/article" class="nav-left-a" :class="{on: isCurrent('/article')}">文章
</router-link>
<router-link to="/about" class="nav-left-a" :class="{on: isCurrent('/about')}">关于
</router-link>
</div>
</div>
</div>
</template> <script>
export default {
name: "common-nav",
data() {
return {}
},
methods: {
isCurrent(path) {
console.log(this.$route.path)
return this.$route.path === path
}
}
}
</script> <style lang="stylus" scoped>
@import "../../assets/css/varibles.styl"
.common-nav {
width %
margin-bottom 88px
.nav {
position fixed
top
left
z-index
width %
height 58px
line-height 58px
font-size 18px
padding 15px
background #fff
box-shadow 2px 8px rgba(, , , 0.1)
}
.nav-left {
display flex
width %
align-items center
}
.nav-left-a {
width 100px
color #
text-align center
}
.nav-left-a:hover {
box-shadow 5px rgba(, , , 0.2)
border-bottom 5px solid $primary
color $primary
}
.on {
border-bottom 5px solid $primary
color $primary
}
}
</style>
vue动态class——实现tag的选中状态的更多相关文章
- javascript动态的改变checkbox的选中状态
<td> <div class="checkbox"> <label> <input type="checkbox" ...
- 动态设置 layui select 为选中状态
// 当前的select的id $('#type').val('你的value值'); //更新全部 layui.form.render();
- layui动态设置checkbox选中状态
今天在使用jquery动态设置layui的checkbox元素的选中状态时始终只能取消选中,却不能重新勾选,点击勾选则没有问题,代码如下 if (value == "true") ...
- LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
- vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换
elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...
- html中radio、checkbox选中状态研究(静下心来看,静下心来总结)
html中radio.checkbox选中状态研究(静下心来看,静下心来总结) 一.总结 1.单选框的如果有多个checked 会以最后一个为准 2.js动态添加checked属性:不行:通过 $(& ...
- elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...
- jq 实现切换菜单选中状态
点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui ...
- vue动态生成表单
vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
随机推荐
- 联想ts550服务器安装windows2008R2系统
发布时间:2018-10-18 点击数:4 服务器型号:联想 thinkserver ts550 系统:windowsserver2008R2 联想的 TS550 USB口全是USB3.0的,官方引 ...
- LIGER UI GRID TREE解决打开子树的时候,母树图标全部变成+
1.为data增加Expanded.当打开时告知已打开 关闭时告知已关闭 2.修改ligergrid 如果是打开状态,则open
- C语言 排序算法总结
#include<stdio.h> #include<stdlib.h> //作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ # ...
- 转 CSS3+js实现多彩炫酷旋转圆环时钟效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- webdriver设置浏览器全屏及设置浏览器窗口为特定大小的方法
from selenium import webdriver driver = webdriver.Chrome() #全屏 driver.maximize_window() #具体大小 driver ...
- 在 PHP 7 中不要做的 10 件事
在 PHP 7 中不要做的 10 件事 1. 不要使用 mysql_ 函数 这一天终于来了,从此你不仅仅“不应该”使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是说你需要迁移到好 ...
- BZOJ1095:[ZJOI2007]Hide 捉迷藏(动态点分治)
Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩 捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条 ...
- Spring batch
学习了解 https://www.ibm.com/developerworks/cn/java/j-lo-springbatch1/index.html?ca=drs-#ibm-pcon
- 【转】js中通过docment.cookie获取到的内容不完整! 在浏览器的application里的cookie里可以看到完整的cookie,个别字段无法通过document.cookie获取。 是否有其他办法可以获取到??
js中通过docment.cookie获取到的内容不完整!在浏览器的application里的cookie里可以看到完整的cookie,个别字段无法通过document.cookie获取.是否有其他办 ...
- (二 -5) 天猫精灵接入Home Assistant-自动发现Mqtt设备--电风扇
官网:https://www.home-assistant.io/components/fan.mqtt/ 1 添加配置文件 要在安装中启用MQTT风扇,请将以下内容添加到您的configuratio ...