當活動選項卡更改時更改圖像圖標
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>
v-model使用一些預設值，'tab'使選項卡預設為活動狀態。 （我在v-model中使用選項卡的 name 屬性，但您可以使用您想要的任何唯一屬性。）v-model檢查哪個標籤處於活動狀態，並使用條件運算子更新圖示。 （我使用了虛擬圖標，您可以使用您的。）在這個演示中，您應該會看到當選項卡處於活動狀態時，將顯示彩色航班圖標，否則將顯示黑色航班圖標。
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-main> <v-container> <v-tabs v-model="tab" > <v-tab v-for="(item, index) in items" :key="index" :href="`#${item.name}`" class="home-tabs" active-class="activeTab" > <img :src="tab == item.name ? item.icon : inactive_icon" /> {{ item.name }} </v-tab> </v-tabs> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script> new Vue({ el: '#app', data () { return { tab: 'Flights', inactive_icon: 'https://www.svgrepo.com/show/413929/fly.svg', items: [ { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Flights" }, { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Hotels" }, { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Flights + Hotels" }, { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Students" }, ], } }, vuetify: new Vuetify(), }) </script> </body> </html> </html>