當活動選項卡更改時更改圖像圖標
P粉448130258
2023-08-29 18:55:29
<p>目前我有一個 v-tab，它有四個帶有圖像圖示和文字的選項卡。但是，當選項卡處於活動狀態時，活動選項卡圖示應變更為另一個影像。我該怎麼做？ </p>
<pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs" class="tabs-menu">
<v-tab
v-for="item in items"
:key="item.id"
>
<img :src="item.icon" />
{{ item.name }}
</v-tab>
</v-tabs>
data() {
return {
tabs: null,
items: [
{ icon: "/planeInactive.svg", name: "plane" },
{ icon: "/hotelInactive.svg", name: "hotel" },
{ icon: "/planehotelInactive.svg", name: "plane hotel" },
{ icon: "/planeInactive.svg", name: "students" },
],
};
},</pre></p>
1
411
v-model使用一些預設值，'tab'使選項卡預設為活動狀態。 （我在v-model中使用選項卡的 name 屬性，但您可以使用您想要的任何唯一屬性。）v-model檢查哪個標籤處於活動狀態，並使用條件運算子更新圖示。 （我使用了虛擬圖標，您可以使用您的。）在這個演示中，您應該會看到當選項卡處於活動狀態時，將顯示彩色航班圖標，否則將顯示黑色航班圖標。