我常用的Vue中的 class style的几种用法

1、class第一种用法

key：class的名称，bodstyle和activeclass都是class的名称，

value：布尔值，isactive也是布尔值，为true的时候就把activeclass这个类添加上，为false的时候没有activeclass这个类

isactive：布尔，用来控制activeclass这个类是否显示

<span :class="{'bodstyle':true, 'activeclass':isactive}">报表</span>

2、class第二种用法

三目运算

<span class="iconfont" :class="index === 0? 'icon-shiliangzhinengduixiang' : 'icon-shiliangzhinengduixiang'"></span>

3、class的第三种写法 

第一眼看到这种写法的时候，看了好几眼都是有点方，后来才明白其实就是方法1中的写法，只不过传了一个参数，把我传蒙圈了

<template>    
   <ul class="pages">
      <li v-for="(item, index) in activeArr" :key="index" :class="activeClass(item)">
        {{ item }}
      </li>
    </ul>
</template>

methods: {
  activeClass(item) {
    return {
         active: this.dataKey ? 
         this.arr[this.active][this.dataKey] === item[this.dataKey] : 
         this.arr[this.active] === item
     }
   }
}

4、style的第一种用法

数据的动态变化

<span class="one" v-for="(item, index) in datastye" :key="index">
    <span class="one-two" :style="{color: item.color}">
       {{item.num}}
    </span><br>{{item.type}}
</span>

5、style的第二种用法

三目运算

<span :style="{color:(index==0?arr.conFontColor:'#000')}">跳转</span>