Bildsymbol ändern, wenn sich die aktive Registerkarte ändert
P粉448130258
2023-08-29 18:55:29
<p>Derzeit habe ich ein V-Tab mit vier Registerkarten mit Bildsymbolen und Text. Wenn die Registerkarte jedoch aktiv ist, sollte sich das Symbol der aktiven Registerkarte in ein anderes Bild ändern. was soll ich machen? </p>
<pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs"
<v-tab
v-for="Artikel in Artikeln"
:key="item.id"
>
<img :src="item.icon"
{{ Artikelname }}
</v-tab>
</v-tabs>
Daten() {
zurückkehren {
Tabulatoren: null,
Artikel: [
{ icon: "/planeInactive.svg", Name: "plane"
{ icon: "/hotelInactive.svg", name: "hotel"
{ icon: "/planehotelInactive.svg", name: "plane + hotel"
{ icon: "/planeInactive.svg", name: "students"
],
};
},</pre></p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>