vue中动态的class

当我们想通过class来改变这一块的样式，则可以动态控制class，来控制样式的变化。

1.在class直接写样式名称

<template>
<div>
  <a style="cursor: pointer; font-size: 16px"  
:class="[scope.row.reportStatus == '0' ? 'red': 'blue',]"
>{{ scope.row.guestName }}</a>
</div>
</template>
<style lang="scss" scoped>
.red {
  color: rgb(255, 0, 0);
}

.bule {
  color: #65a6e9;
}
</style>

2.可以在class中写方法，用方法来控制样式的显示。

（如果上面那种方法中的三目运算符中的判断太长不好控制，就可以用方法来控制）

<template>
<div>
  <a style="cursor: pointer; font-size: 16px"  
:class="{'red':functionName(item),'blue':functionName1(item)}"
>{{ scope.row.guestName }}</a>
</div>
</template>
<script>
    methods: {
        functionName(val){
            if(val == '0'){return true}
        },
        functionName(val){
            if(val == '1'){return true}
        },
    }
</script>
<style lang="scss" scoped>
.red {
  color: rgb(255, 0, 0);
}

.bule {
  color: #65a6e9;
}
</style>

方法返回true或false，如果未true就显示前面的样式。