javascript - Komponen bawah, mengapa teks kelas terikat Vue tidak berubah warna Kod berikut

Question

Saya meletakkan
data () {

return {
  isActive: 'a'
}

}, jika 'a' dalam
digantikan dengan 'b', perkataan yang diterbitkan akan bertukar warna

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

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

</p>
</template>

<skrip>
eksport lalai {
data () {

return {
  isActive: 'a'
}

},
kaedah: {

select (value) {
  this.isActive = value
}

}
}
</skrip>

<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;
  }
}

}
.aktif {

color: #41B883;

}
</style>

Answer 1

Apa yang anda tulis terlalu rumit Ini boleh dilakukan dengan menulis linkActiveClass semasa mengkonfigurasi laluan Anda disyorkan untuk membaca dokumentasi vue-router
Konfigurasi boleh ditulis dalam laluan utama.js = VueRouter baharu({

linkActiveClass: "active",    //设置点击状态的class
mode: 'hash',
hashbang:true,
routes:routerConfig

})

Kemudian tambahkan gaya .active{color: #41B883;} pada gaya .vue anda

pautan-penghala ditulis seperti ini<pautan-penghala ke="/" class="item">Halaman utama</pautan-penghala>

Answer 2

Sepatutnya cukup untuk menggantikannya dengan @click.native Sudah tentu cara di atas lebih baik

Answer 3

Ganti acara klik dengan @click.native="select('a')"
Semasa menulis navigasi jenis ini, saya biasanya menggunakan kaedah ini, v-for
<ul>

       <li v-for="(item,index) in liData" :class="    {active:$route.matched[0].path==item.label}" ><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的变化就是根据地址栏中变化而变化，这样前进后退都不会有问题

Answer 4

    <router-link :to="item.url" active-class="act-bar" tag="li" exact>
     
    </router-link>

Anda boleh menentukan gaya .act-bar{}

yang dipilih

Answer 5

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

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

Cukup lakukan ini. Warna yang ditetapkan dalam .router-link-active ialah pautan penghala yang sedang anda klik Warna gaya selepas pengaktifan juga boleh ditetapkan kepada gaya lain, dan kemudian pautan penghala lain akan kembali kepada lalai . Gaya