- 原生基础
- HTML| CSS| HTML5| CSS3| JavaScript
最新推荐
-
30分钟学会网站布局
152542 人学习
最新推荐
-
你的第一行 UNI-APP 代码
5487 人学习
-
Flutter 从头到应用启动
7821 人学习
最新推荐
-
AXURE 9视频教程（适合产品经理交互产品设计UI）
3350 人学习
-
零基础PS视频教程
180660 人学习
-
16天带你入门UI视频教程
48569 人学习
-
PS技巧和切片技巧视频教程
18603 人学习
最新推荐
-
阿里云环境搭建以及项目上线视频教程
40936 人学习
-
计算机网络概述——程序员必须掌握的基础知识
1549 人学习
-
程序员必备教程——HTTP协议讲解
1183 人学习
-
Websocket视频教程
32909 人学习
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>