vue element tab标签与组件对应显示

<template>
    <el-container>
    <el-main>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="选课管理" name="first">
        </el-tab-pane>
        <el-tab-pane label="批次管理" name="second">
        </el-tab-pane>
      </el-tabs>
      <courseSelectionMangement v-if="activeName === 'first'"></courseSelectionMangement>
      <courseSelectionTime v-if="activeName === 'second'"></courseSelectionTime>
    </el-main>
  </el-container>
</template>

<script>
import courseSelectionMangement from "./courseSelectionMangement"
import courseSelectionTime from "./courseSelectionTime"

export default {
  components:{
    courseSelectionMangement,
    courseSelectionTime
  },
  data(){
    return{
      activeName:"first"
    }
  }
}
</script>