- Bahagian hadapan
- HTML| CSS| JavaScript| Vue.js
Syor Terkini
-
Php8, saya datang juga
84669 orang belajar
- asas asli
- HTML| CSS| HTML5| CSS3| JavaScript
Syor Terkini
-
Ketahui reka letak tapak web dalam masa 30 minit
152542 orang belajar
- Pengenalan kepada Asas
- MySQL| SQL Server
Syor Terkini
-
Tutorial Video Permulaan Shangguan Oracle kepada Mahir
20005 orang belajar
Syor Terkini
-
Baris pertama kod UNI-APP anda
5487 orang belajar
-
Berkibar dari awal ke pelancaran apl
7821 orang belajar
Syor Terkini
-
-
Tutorial Video PS Kemahiran Asas Sifar
180660 orang belajar
-
Tutorial video UI 16 hari untuk anda bermula
48569 orang belajar
-
Tutorial Video Teknik PS dan Teknik Menghiris
18603 orang belajar
- Klasifikasi Perpustakaan Kelas
- HTTP| TCP/IP| pengaturcaraan asas
Syor Terkini
-
Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek
40936 orang belajar
-
-
Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP
1183 orang belajar
-
Tutorial Video Websocket
32909 orang belajar
![[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>