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的选中状态的更多相关文章

  1. javascript动态的改变checkbox的选中状态

    <td> <div class="checkbox"> <label> <input type="checkbox" ...

  2. 动态设置 layui select 为选中状态

    // 当前的select的id $('#type').val('你的value值'); //更新全部 layui.form.render();

  3. layui动态设置checkbox选中状态

    今天在使用jquery动态设置layui的checkbox元素的选中状态时始终只能取消选中,却不能重新勾选,点击勾选则没有问题,代码如下 if (value == "true") ...

  4. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  5. vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换

    elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...

  6. html中radio、checkbox选中状态研究(静下心来看,静下心来总结)

    html中radio.checkbox选中状态研究(静下心来看,静下心来总结) 一.总结 1.单选框的如果有多个checked 会以最后一个为准 2.js动态添加checked属性:不行:通过 $(& ...

  7. elementUI的导航栏在刷新页面的时候选中状态消失的解决

    首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...

  8. jq 实现切换菜单选中状态

    点击导航菜单,切换选中状态 效果: 思路:首先获取选中的URL,再通过正则判断是否相同,相同就加上相应的属性,不相同就去除相应的属性. html代码 <div class="layui ...

  9. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

随机推荐

  1. php配置文件php.ini的详细解析(续)

    file_uploads = On                                                                                 // ...

  2. 关于phpstorm ftp目录乱码

    关于IIS FTP服务器汉字文件目录乱码问题:一般来说,IIS 服务器编码默认为GBK,而你的目录可能是UTF-8,将phpstorm的远程连接设置为GBK就OK了.记住服务器的编码,文件的编码要统一

  3. [福大软工] Z班 软件工程实践总结 作业成绩

    作业要求 http://www.cnblogs.com/easteast/p/8081265.html 评分细则 本次作业评分满分为20分,分为五个部分,分别如下: 回望过去(5'):以实际数据总结分 ...

  4. JSONCkecker(Java语言版本)

    // MIT License // // Copyright (c) 2016 Michel Kraemer // Copyright (c) 2005 JSON.org // // Permissi ...

  5. form表单post请求乱码问题

    今天做一个查询的小模块遇到了 请求乱码的问题,表单请求方式是post 解决方法是在web.xml 文件中配置一下内容 <!--配置解决post乱码问题filter --> <filt ...

  6. socket.setSoTimeout(1000);

    这个用来设置与socket的inputStream相关的read操作阻塞的等待时间,超过设置的时间了,假如还是阻塞状态,会抛出异常java.net.SocketTimeoutException: Re ...

  7. 如何用chrome扩展将网页变成黑底白字,用以保护视力

    不知道有没有科学依据,自己感觉黑底白字对视力好些,于是动手加个chrome扩展: 第一步:建个文件夹,名称比如叫changeColor; 第二步:在changeColor文件夹中建三个文件:manif ...

  8. linux 下的启动项

    /etc/profile  这个也是启动脚本.而且优先级很高哦.. 以下都是网上找来的 (1)编辑文件 /etc/rc.local 输入命令:vim /etc/rc.local 将出现类似如下的文本片 ...

  9. KazaQ's Socks (找规律)

    #include<iostream> using namespace std; #define ll long long ll n, m; ll t; int main(){ while ...

  10. Linux 文件系统管理

    Linux 文件系统管理 课程大纲  文件系统构成及命令  硬盘分区及管理  磁盘配额  备份与恢复   文件系统构成 /usr/bin ./bin:存放所有用户可以执行的命令 /usr/s ...