suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Untere Komponente: Warum ändert sich die Farbe des an Vue gebundenen Klassentextes nicht?

Ich habe
data () {

eingegeben
return {
  isActive: 'a'
}

}, wenn das „a“ in
durch „b“ ersetzt wird, ändern die veröffentlichten Wörter ihre Farbe

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

<script>
Standard exportieren {
data () {

return {
  isActive: 'a'
}

},
Methoden: {

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

}
.aktiv {

color: #41B883;

}
</style>

巴扎黑巴扎黑2734 Tage vor1311

Antworte allen(5)Ich werde antworten

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-07-05 10:42:18

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

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

    })

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

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

    Antwort
    0
  • 習慣沉默

    習慣沉默2017-07-05 10:42:18

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

    Antwort
    0
  • 阿神

    阿神2017-07-05 10:42:18

    将click事件换成@click.native="select('a')";
    写这种导航时,我通常是用这样的方法,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的变化就是根据地址栏中变化而变化,这样前进后退都不会有问题

    Antwort
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-07-05 10:42:18

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

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

    Antwort
    0
  • 淡淡烟草味

    淡淡烟草味2017-07-05 10:42:18

    <p class="footer-box">
       <router-link to="/">
          首页
       </router-link>
    </p>
    .router-link-active{
        color: #41B883;
    }

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

    Antwort
    0
  • StornierenAntwort