vue 动态路由添加动态类名样式，并适用于v-for循环导航

1.话不多说，先来个小漩涡

<template>
<div class="boxDiv">
<van-nav-bar title="监护图表" left-text="返回" left-arrow fixed @click-left="onClickLeft"/>
<PatientBase/>
<div style="height: 0.5rem;line-height: 0.5rem">
<div class="btntwoRouterUL">
<span class="btntwoRouter btnmar" :class="activeClass == 1 ? 'active':''" @click="btnnavclick(1)">
<router-link :to="{name:'GCInfo',params:{CaseId:this.CaseId}}">特殊提示</router-link>
</span>
<span class="btntwoRouter"  :class="activeClass == 2 ? 'active':''"  @click="btnnavclick(2)">
<router-link :to="{name:'Chart',params:{CaseId:this.CaseId}}">持续关注项目</router-link>
</span>
</div>
</div>
<div  class="chartbtn">
<router-view/>
</div>
</div>
</template>

<script>

import PatientBase from "@/components/PC/PatientHeader";/*引入头部*/
import * as OperativeInfoAJAX from '@/api/pc/OperativeInfo.js';/*引入axios.js*/
export default {
data () {//Vue 实例的数据对象
return {
msg: '',
OPTInfoArr:[],
CaseId: this.$route.params.CaseId,
activeClass:1
}
},
components:{//组件
PatientBase
},
computed: {//计算属性

},
created(){//挂载前
this.OperativeInfo()

},
methods: {//方法，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的?this?自动绑定为 Vue 实例。
/**
* 获取手术信息
*/
OperativeInfo(){

let patInfo = this.$getLocalStorage("PatInfo","object");
OperativeInfoAJAX.GetPatBaseInfo(patInfo)
.then(res=>{
if(res.Errs.length<1){
this.OPTInfoArr=res.Result.OperationList
}else{
this.$message({
message: res.Errs.join(','),
type: 'error',
})
}

})
.catch(err=>{

})
},

/*返回上一级*/
onClickLeft(){
this.$router.go(-1)
},

/*导航栏*/
navclick(){

},
btnnavclick(index){
this.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
}

},
mounted () {//事件    挂载完成，一般在此发起ajax请求
// this.drawLine()

},
watch:{//监听事件函数

},

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btntwoRouterUL{
text-align: center;
}
.btntwoRouterUL  .btntwoRouter{
width: 1.2rem;
height: 0.37rem;
border-radius: 0.2rem;
background-color: #ffffff;
line-height: 0.37rem;
text-align: center;
display: inline-block;
}
.btntwoRouterUL  .btntwoRouter>a{
color: #808080;
}
.btnmar{
margin-right: 0.3rem;
}

*{
font-size: 0.14rem;
}
.boxDiv{
height: 100%;
display: flex;
flex-flow: column;
}
.chartbtn{
/*background-color: #f2f3f7;*/
/*height: 100%;*/
padding:0rem 0.1rem 0.1rem 0.1rem;
flex: 1;
overflow-y: auto;
}

.active >a{
color: #ffffff!important;
}
.active{
background-color: #0768a9!important;
}

</style>

2.我先干为敬，你随意