Vue.jsでタブ切り替えと色変更操作を実装する解説

<テンプレート>
<div> 要素
     //タブページ切り替えボタン部分 <ul>
        <li v-for="(item,index) in navList" :class = "{active:!(index- 
            menuInde​​x)}" @click = 'menuShow(index)'>
          <a href="#" rel="外部nofollow" >{{item}}</a>
        </li>
      </ul>
 
   //コンテンツ本体 <div v-show = 'menuInde​​x == 0'> コンテンツ 1 <!-- これはサブコンポーネントに置き換えることができます--></div>
   <div v-show = 'menuInde​​x == 1'>コンテンツ 2<!--ここでサブコンポーネントに置き換えることができます--></div>
</div>
</テンプレート>
 
<script type="text/javascript">
エクスポートデフォルト{
データ（）{
      戻る {
         メニューインデックス:0,
        navList:['ミドルウェアの詳細', 'デプロイメントアーキテクチャ'],
      }
            }
   メソッド: {
      メニュー表示 (インデックス) {
        this.menuInde​​x = インデックス
        console.log(this.menuInde​​x)
      }
}
</スクリプト>
//スタイル <スタイルスコープ>
//クリックすると色が切り替わります。blue.active{ に設定しました。
    背景色: rgba(13, 175, 255, 0.33);
    }
<スタイル>

。アクティブ{
//背景色 background-color: rgba(13, 175, 255, 0.33);
//フォント色: 赤;
  }