Tukar ikon imej apabila tab aktif berubah
P粉448130258
2023-08-29 18:55:29
<p>Pada masa ini saya mempunyai tab v yang mempunyai empat tab dengan ikon imej dan teks. Walau bagaimanapun, apabila tab aktif, ikon tab aktif harus bertukar kepada imej lain. apa patut saya buat? </p>
<pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs"
<v-tab
v-for="item dalam item"
:key="item.id"
>
<img :src="item.icon"
{{ nama barang }}
</v-tab>
</v-tabs>
data() {
kembali {
tab: null,
item: [
{ ikon: "/planeInactive.svg", nama: "pesawat"
{ ikon: "/hotelInactive.svg", nama: "hotel"
{ ikon: "/planehotelInactive.svg", nama: "pesawat + hotel"
{ ikon: "/planeInactive.svg", nama: "pelajar"
],
};
},</pre></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
v-model使用一些默认值，'tab'使选项卡默认处于活动状态。 （我在v-modelanda, tetapi anda boleh menggunakan mana-mana atribut unik yang anda inginkan. )v-modeluntuk menyemak tab mana yang aktif dan kemas kini ikon menggunakan pengendali bersyarat. (Saya menggunakan ikon tiruan, anda boleh menggunakan ikon anda. )Dalam demo ini, anda sepatutnya melihat bahawa apabila tab aktif, ikon penerbangan berwarna akan dipaparkan, jika tidak, ikon penerbangan hitam akan dipaparkan.
<!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>