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，會恢復默認的樣式