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;

}