javascript - 底部组件，vue绑定class文字为什么不变色，如下代码

问题描述

我把 data () {

return { isActive: ’a’}

},中的 ’a’,换成’b’,发表的字会变色

<template lang='html'> <p class='footer'>

<p class='footer-box'> <router-link : @click='select(’a’)' to='/' class='item'>首页</router-link> <router-link : @click='select(’b’)' to='/create' class='item'>发表</router-link> <router-link : @click='select(’c’)' to='/message' class='item'>消息</router-link> <router-link : @click='select(’d’)' to='/user' class='item'>我的</router-link></p>

</p></template>

<script>export default { data () {

return { isActive: ’a’}

}, methods: {

select (value) { this.isActive = value}

}}</script>

<style lang='less'> .footer {

position: fixed;left: 0;bottom: 0;height: 50px;width: 100%;background-color: #fff;border-top: 1px solid #bbb;.footer-box { display: flex; height: 50px; width: 100%; line-height: 40px; .item { flex: 1; text-align: center; }}

} .active {

color: #41B883;

}</style>

问题解答

你写的太复杂了，这个完全可以在配置路由的时候写一个linkActiveClass搞定的，建议去看看vue-router的文档配置可以写在main.js定义路由里面const router = new VueRouter({

linkActiveClass: 'active', //设置点击状态的classmode: ’hash’,hashbang:true,routes:routerConfig

})

然后在你的.vue样式里加上.active{color: #41B883;}的样式就行了

router-link写成这样<router-link to='/' class='item'>首页</router-link>

换成@click.native应该就行了，当然楼上的方法更好

将click事件换成@click.native='select(’a’)'；写这种导航时，我通常是用这样的方法，v-for <ul>

<li v-for='(item,index) in liData' : ><router-link :to='item.label'>{{item.name}}</router-link></li>

</ul> data(){

return { liData:[ {name:'首页',label:'/home'}, {name:'设计器',label:'/designer'}, {name:'任务管理',label:'/taskmanger'}, {name:'节点管理',label:'/node'} ] },这里的active的变化就是根据地址栏中变化而变化，这样前进后退都不会有问题回答4：

<router-link :to='item.url' active- tag='li' exact> </router-link>

你可以定义选定后的样式 .act-bar{}

<p class='footer-box'> <router-link to='/'> 首页 </router-link></p>

.router-link-active{ color: #41B883;}

直接这样就行了在.router-link-active设置的颜色，就是你当前点击的router-link那一块，激活后的样式颜色，也可以设置其他样式，然后其他的router-link，会恢复默认的样式