vue 根据if添加class_vue 利用vue-if else做 动态导航以及动态class

div部分

导航部分

判断 active 跟item 相等的时候 用navigationA 样式 否则 就用 navigation样式

{{item}}

导航内容

判断 type = 'A' 的时候显示

里面是组件

里面是组件

Not A/B/C

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;

}