vue.js 更改活动选项卡时更改图像图标

4sup72z8 于 2022-12-23 发布在 Vue.js

关注(0)|答案(1)|浏览(121)

目前我有一个v标签，有四个标签的图像图标和文字以及。但当标签是活动的，活动标签图标应该改变为另一个图像。我应该怎么做呢？

<v-tabs v-model="tabs" class="tabs-menu">
    <v-tab
      v-for="item in items"
      :key="item.id"
    >
      <img :src="item.icon" />
        {{ item.name }}
    </v-tab>
</v-tabs>

data() {
    return {
      tabs: null,
      items: [
        { icon: "/planeInactive.svg", name: "plane" },
        { icon: "/hotelInactive.svg", name: "hotel" },
        { icon: "/planehotelInactive.svg", name: "plane + hotel" },
        { icon: "/planeInactive.svg", name: "students" },
      ],
    };
  },

vue.js

来源：https://stackoverflow.com/questions/74820048/change-image-icon-when-the-active-tab-is-change

1条答案

按热度按时间

zysjyyx41#

1.为v-model，'tab'使用一些默认值，使标签在默认情况下处于活动状态。（* 我使用的是v-model中标签的name属性，但您可以使用任何唯一的属性。）
1.使用此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>

赞(0）回复(0）举报 2022-12-23

我来回答

vue.js 更改活动选项卡时更改图像图标

1条答案

相关问题

热门标签

最新问答