1 第一种方法
<div :class="{'active':isActive}"> 文字</div>
2 第二种方法
<div class="activeOne"
:class= "{activeTwo:isActive,'activeThree': hasError}" > 文字</div>
3 第三种方法
<div :class="classObject"> 文字</div>
4 第四种方法
以数组的形式表示
<div :class="[activeClass, errorClass]"> 文字</div>
<style>
.activeClass {
border: 1px solid red;
width: 100px;
height: 100px;
}
.errorClass {
background-color: orange;
}
</style>
5 第五种方法
<div :class="[isActive?'activeTwo':'activeThree']"> 文字</div>
<script>
data(){
return{
isActive:true
}
}
</script>
<style>
.activeTwo{
color:red
}
.activeThree{
color:pink
}
</style>