vue 3学习记录之选项卡 tabs

html/vue

  <!-- 选项卡 -->
      <!-- <div v-bind:class="{ active: isActive }"></div> ; 
        //这里我们使用isActive 这个变量动态判断active是否显示到html -->
      <div class="mytab">
        <div class="tabs">
          <div
            type="button"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="switchTab(index)"
            :class="{ active: currentTab === index }"
          >
            {
  
  { tab.title }}
          </div>
        </div>
        <component :is="currentTabComponent" />
      </div>

js内容

/*采用vue选项式风格*/
import { ref } from 'vue';
import ComponentA from './views/book_1.vue';
import ComponentB from './views/book_2.vue';
import ComponentC from './views/book_3.vue';

let tabs = [
    { title: '史地理论', component: ComponentA },
    { title: '史地志', component: ComponentB },