Changer l'icône de l'image lorsque l'onglet actif change
P粉448130258
2023-08-29 18:55:29
<p>Actuellement, j'ai un onglet en V qui comporte quatre onglets avec des icônes d'image et du texte. Cependant, lorsque l'onglet est actif, l'icône de l'onglet actif doit se transformer en une autre image. Que dois-je faire? </p>
<pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs" class="tabs-menu">
<v-onglet
v-for="élément dans les éléments"
:key="item.id"
>
<img :src="item.icon"
{{ nom de l'article }}
</v-tab>
</v-onglets>
données() {
retour {
onglets : nul,
articles: [
{ icône : "/planeInactive.svg", nom : "avion" },
{ icône : "/hotelInactive.svg", nom : "hôtel" },
{ icône : "/planehotelInactive.svg", nom : "avion + hôtel" },
{ icône : "/planeInactive.svg", nom : "étudiants" },
],
} ;
},</pre></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
v-model使用一些默认值，'tab'使选项卡默认处于活动状态。 （我在v-model, mais vous pouvez utiliser n'importe quel attribut unique de votre choix. )v-modelpour vérifier quel onglet est actif et mettre à jour l'icône à l'aide d'opérateurs conditionnels. (J'ai utilisé des icônes factices, vous pouvez utiliser les vôtres. )Dans cette démo, vous devriez voir que lorsque l'onglet est actif, une icône de vol colorée s'affichera, sinon une icône de vol noire s'affichera.
<!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>