点击导航对应切换内容且被点击后样式改变

项目场景：

2022年3月 知识产权模块

---

问题描述

给a-col实现的上导航添加点击事件对应切换各模块内容

解决方案：

1.循环展示导航列表、添加事件格式、动态添加点击后样式，内容切换区域格式。

	  <!-- 导航区 -->
      <div class="navbar">
        <a-row :gutter="20" class="main-nav" type="flex">
          <a-col
            v-for="(item, index) in typeList"
            class="main-nav-col"
            :key="index"
            :value="item"
            @click="callback(index)"
            :class="{ active: change === index }"
          >
            <div>{{ item }}</div>
            <div>{{ index }}篇</div>
          </a-col>
      </div>
      <!-- 切换测试区域 -->
      <div class="tab_content">
        <keep-alive>
          <component :is="comp"></component>
        </keep-alive>
      </div>
      <!-- 切换测试区域 -->

2.引入子组件

// 子组件引入
import propertyLearning from './allMenu/propertyLearning.vue'
import propertyDegree from './allMenu/propertyDegree'

3.子组件注入、相关属性声明、点击事件

<script>
	export default {
	  name: 'propertyRight', 
	  //子组件注入
	  components: {
	    propertyLearning,
	    propertyDegree
	  },
	  data() {
	    return {
	      // 导航列表
	      typeList: ['学术论文', '学位论文'], 
	      // 控制切换按钮后按钮改变样式
	      change: 0,
	      // 控制子组件显示
	      comp: 'propertyLearning',  
	    }
	  },
      methods: {
	    // 导航点击
	    callback(value) {
	      this.change = value
	      if (value === 0) this.comp = 'propertyLearning'
	      if (value === 1) this.comp = 'propertyDegree'
	    },
  	  },
  }
</script>
<style lang="less" scoped>
	.active {
       background: skyblue;
	 }
</style>