vue tab选项卡

最新推荐文章于 2025-10-19 09:42:10 发布

原创最新推荐文章于 2025-10-19 09:42:10 发布 · 933 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

17 篇文章

订阅专栏

博客介绍了在实际项目中运用选项卡的实现方式。因业务中选项卡内容较多，采用父组件引入子组件的方式。新建父组件，可自行引入fund、bond等五个子组件。

选项卡在实际项目中还是会经常运用到的，非常简单，但也记录下。因业务上的选项卡内容还是比较多的，所以父组件引入子组件的方式来实现。
首先新建一个父组件，如下：

<template>
  <div class="service">
    <ul class="tab-list">
      <li
        v-for="(item ,index) in tabList"
        class="tab"
        :class="{active:active === index}"
        @click="toggle(index)"
      >{{item}}</li>
    </ul>
    <component :is="currentView" class="tab-main"></component>
  </div>
</template>

<script>
import fund from "@/views/service/fund";
import bond from "@/views/service/bond";
import trust from "@/views/service/trust";
import insure from "@/views/service/insure";
import beauty from "@/views/service/beauty";

export default {
  components: {
    fund,
    bond,
    trust,
    insure,
    beauty
  },
  data() {
    return {
      active: 0,
      currentView: "fund",
      tabList: ["私募基金","可转债","信托","保险","医美"]
    };
  },
  methods: {
    toggle: function(index) {
      this.active = index;
      if (index == 0) {
        this.currentView = "fund";
      } else if (index == 1) {
        this.currentView = "bond";
      } else if (index == 2) {
        this.currentView = "trust";
      } else if (index == 3) {
        this.currentView = "insure";
      } else if (index == 4) {
        this.currentView = "beauty";
      }
    }
  }
};
</script>
<style scoped lang="less" src="@/assets/css/service.less"></style>

fund，bond，trust，insure，beauty等五个是子组件，可自行引入。