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>