javascript - 一番下のコンポーネント、Vue バインドされたクラスのテキストの色が変わらないのはなぜですか? 次のコード

Question

データを入れました () {
リーリー

},

の「a」を「b」に置き換えると、公開された単語の色が変わります

<template lang="html">

<p class="footer">
リーリー

</p>

</template>

<script>

デフォルトのエクスポート {
データ () {
リーリー

},

メソッド: {
リーリー

}

}
</script>

<style lang="less">

.footer {
リーリー ＃＃＃}＃＃＃ 。アクティブ {＃＃＃ リーリー

}

</style>

Answer 1

あなたが書いたものは複雑すぎます。これは、ルートを設定するときにlinkActiveClassを書くことで行うことができます。
設定はmain.jsで定義されたルートに書くことができます。 = 新しい VueRouter({
リーリー

})

次に、.active{color: #41B883;} スタイルを .vue スタイルに追加します

router-link は次のように記述されます<router-link to="/" class="item">Homepage</router-link>

Answer 2

@click.native に置き換えるだけで十分です。もちろん、上記の方法の方が良いです

。

Answer 3

クリックイベントを @click.native="select('a')"; に置き換えます
この種のナビゲーションを記述するときは、通常、このメソッドを使用します、v-for
<ul>

リーリー

</ul>
data(){

リーリー

Answer 4

リーリー

選択したスタイル .act-bar を定義できます{}

Answer 5

リーリー リーリー

これを行うだけで、現在クリックしているルーターリンクの色が他のルーターリンクに設定されます。スタイル