Vue の 2 択タブバー切り替えの新しいアプローチ

<テンプレート>
 <div id="アプリ">
  <div class="tabWrap">
   <!-- この構造はタブナビゲーションであり、対応するクリックイベントがこれにバインドされています。クリックイベントのコールバックでは、対応するコンテンツの表示と非表示、スタイルの変更、つまりタブの切り替えが制御されます-->
   <div class="tabNav">
    <div class="navOne" @click="tabOne">タブ1</div>
    <div class="navTwo" @click="tabTwo">タブ2</div>
   </div>
   <!-- この構造はタブナビゲーションに対応するコンテンツです-->
   <div class="tabContent">
    <!-- v-show を使用して非表示を制御し、1 つを非表示にして 1 つを同時に表示することで、タブ バーの切り替え効果が得られます -->
    <div class="navOneBox" v-show="showTabOne">切り替え中 1</div>
    <div class="navTwoBox" v-show="showTabTwo">私はtab2です</div>
   </div>
  </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:「アプリ」、
 データ（） {
  戻る {
   showTabOne: true, // 切り替える 2 つのタブのうち 1 つを選択します。 showTabTwo: false, // 切り替える 2 つのタブのうち 1 つを選択します。 };
 },
 メソッド: {
  // 2つのタブバースイッチのうち1つを選択します tabOne() {
   /*
    tab1をクリックすると、tab1が表示され、tab2が非表示になります。つまり、showTabOneはtrue、showTabTwoはfalseです。
    同時に、tab1 のスタイルを「強調表示」するように変更し、tab2 のスタイルを「強調表示解除」するように変更することを忘れないように注意してください。
    tab2 をクリックした場合も同様です。
   */
   タブのタイトルを true に設定します。
   this.showTabTwo = false;
   document.querySelector(".navOne").style.backgroundColor = "#fff";
   document.querySelector(".navTwo").style.backgroundColor = "#e3e3e3";
   document.querySelector(".navOne").style.color = "#3985EC";
   document.querySelector(".navTwo").style.color = "#80868D";
  },
  // 2つのタブバーの切り替えのいずれかを選択します tabTwo() {
   this.showTabTwo = true;
   this.showTabOne = false;
   document.querySelector(".navOne").style.backgroundColor = "#e3e3e3";
   document.querySelector(".navTwo").style.backgroundColor = "#fff";
   document.querySelector(".navTwo").style.color = "#3985EC";
   document.querySelector(".navOne").style.color = "#80868D";
  },
 },
};
</スクリプト>

<スタイル lang="less">
.tabNav {
 幅: 126ピクセル;
 高さ: 30px;
 境界線の半径: 2px;
 背景色: #e3e3e3;
 ディスプレイ: フレックス;
 アイテムの位置を中央揃えにします。
 コンテンツの均等配置: スペースを均等に;
 .navOne{
  幅: 60ピクセル;
  高さ: 26px;
  境界線の半径: 2px;
  背景色: #fff;
  色: #3985ec;
  フォントサイズ: 14px;
  フォントの太さ: 500;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  カーソル: ポインタ;
 }
 .navTwo {
  幅: 60ピクセル;
  高さ: 26px;
  色: #80868d;
  境界線の半径: 2px;
  フォントサイズ: 14px;
  フォントの太さ: 500;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  カーソル: ポインタ;
 }
}
.tabコンテンツ{
 上マージン: 8px;
 .navOneBox {
  背景色: #bfa;
 }
 .navTwoBox {
  背景色: #baf;
 }
}
</スタイル>