現在、画像アイコンとテキストを含む 4 つのタブがある v-tab を持っています。ただし、タブがアクティブな場合は、アクティブなタブのアイコンが別の画像に変わるはずです。どうすればいいですか？
データ（） { 戻る { タブ: null、 アイテム: [ { アイコン: "/planeInactive.svg"、名前: "飛行機" }、 { アイコン: "/hotelInactive.svg"、名前: "ホテル" }、 { アイコン: "/planehotelInactive.svg"、名前: "プレーン ホテル" }、 { アイコン: "/planeInactive.svg"、名前: "学生" }、 ]、 }; }, {{ 項目名 }}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
- v-model
この
- v-model
このデモでは、タブがアクティブな場合は色付きのフライト アイコンが表示され、それ以外の場合は黒いフライト アイコンが表示されることがわかります。と'tab'にいくつかのデフォルト値を使用すると、デフォルトでタブがアクティブになります。 (ここではv-modelでタブの name 属性を使用していますが、任意の一意の属性を使用できます。)を使用して、アクティブなタブを確認し、条件演算子を使用してアイコンを更新します。 (私はダミーのアイコンを使用しましたが、自分のアイコンを使用できます。)