vue中的自定义选项卡

视图层  

<div class="nav">

      <ul>

        <li class="titlenav"   @click="changeTab = 'elText'"

        :class="[changeTab == 'elText' ? 'active' : '']">

          <img src="../../assets/images/wenben.png" alt="">

          <p>采集介绍</p>

        </li>

         <li class="titlenav"  @click="changeTab = 'elImgs'"

        :class="[changeTab == 'elImgs' ? 'active' : '']" >

          <img src="../../assets/images/wenben.png" alt="">

          <p>采集介绍</p>

        </li>

         <li class="titlenav"  @click="changeTab = 'elAdd'"

        :class="[changeTab == 'elAdd' ? 'active' : '']">

          <img src="../../assets/images/wenben.png" alt="">

          <p>采集介绍</p>

        </li>

         <li class="titlenav" @click="changeTab = '1'"

        :class="[changeTab == '1' ? 'active' : '']">

          <img src="../../assets/images/wenben.png" alt="">

          <p>采集介绍</p>

        </li>

         <li class="titlenav"  @click="changeTab = '2'"

        :class="[changeTab == '2' ? 'active' : '']">

          <img src="../../assets/images/wenben.png" alt="">

          <p>采集介绍</p>

        </li>

         <li class="titlenav"  @click="changeTab = '3'"

        :class="[changeTab == '3  ' ? 'active' : '']">

          <img src="../../assets/images/wenben.png" alt="">

          <p>采集介绍</p>

        </li>

      </ul>

  组件

    <component  :is="changeTab"></component>

  </div>

逻辑层

  data() {

    return {

           changeTab: "elText",

    };

  },