vue 利用vue-if else做 动态导航以及动态class
div部分
导航部分
<Row style="width: 80%;height: 60px;margin: auto;text-align: center; position: relative;top: -3px;">
判断 active 跟item 相等的时候 用navigationA 样式 否则 就用 navigation样式
<Col span="3" :class = "active=== item ? 'navigationA' : 'navigation'" v-for="item innavarr" @click.native="navclick(item)">
{{item}}
</Row>
导航内容
判断 type = 'A' 的时候显示
<div v-if="type=== 'A'">
里面是组件
</div>
<div v-else-if="type=== 'B'">
里面是组件
</div>
<div v-else>
Not A/B/C
</div>
js部分内容
//数据
data() {
return {
active :'背景概述',
navigation:'navigation',
type:'A',
navarr:[
'背景概述',
'商业综合楼宇',
'住宅酒店',
'校园',
'医院',
'银行',
'化工园区',
'九小场所'
]
}
},
//方法
methods: {
navclick(item){
let me =this
console.log(item)
//将点击的元素的索引赋值给变量
me.active = item
let e =item
if (e==='背景概述') {
me.type='A'
}
else if (e==='商业综合楼宇') {
me.type='B'
}
else if (e==='住宅酒店') {
me.type='C'
}
else if (e==='校园') {
me.type='D'
}
else if (e==='医院') {
me.type='F'
}
else if (e==='银行') {
me.type='G'
}
else if (e==='化工园区') {
me.type='H'
}
else if (e==='九小场所') {
me.type='I'
}
}
},
css部分
.navigation{
border-right:1px solid #E9E9E9;
color:#000000;
font-size:16px;
height:60px;
line-height:60px;
}
.navigationA{
border-top:3px solid #E50000;
border-right:1px solid #E9E9E9;
color:#E50000;
font-size:16px;
height:60px;
line-height:57px;
}
