6. Class绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为 class 是 attribute，我们可以和其他attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 cass 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达的值也可以是对象或数组

（1）绑定对象

<script>
export default{
    data(){
        return{
          isActive:true,
          hasError:true,
           } 
        }    
}
</script>
<template>
<p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定</p>
</template>

<style>
.active{
    font-size: 30px;
}
.text-danger{
    color:red;
}
</style>

（2）多个对象绑定

<script>
export default{
    data(){
        return{
          isActive:true,
          hasError:true,
            
          # 多个对象绑定
          classObjece:{
             active:true,
             'text-danger':false
          }
           } 
        }
       
}
</script>
<template>
<p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
<p :class="classObjece">Class样式绑定2</p>
</template>

<style>
.active{
    font-size: 30px;
}
.text-danger{
    color:red;
}
</style>

（3）绑定数组

<script>
export default{
    data(){
        return{
          isActive:true,
          hasError:true,
          classObjece:{
             active:true,
             'text-danger':false
          },
          arrActive:'active',
          arrHasError:'text-danger'
           } 
        }
    
    
}
</script>
<template>
<p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
<p :class="classObjece">Class样式绑定2</p>

# 绑定数组
<p :class="[arrActive,arrHasError]">Class样式绑定3</p>
</template>

<style>
.active{
    font-size: 30px;
}
.text-danger{
    color:red;
}
</style>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式

<p :class="[isActive ? 'active' : '']">Class样式绑定4</p>

（4）数组和对象

温馨提示
数组和对象嵌套过程中，只能是数组嵌套对象，不能反其道而行

<p :class="[isActive ? 'active' : '', { 'text-danger': hasError }]">Class样式绑定5</p>

（5）style绑定

同理，style也可以类似绑定

<script>
export default {
    data(){
        return {
            ColorObjet:{
                color:'red',
                fontSize:60+'px'
            }

        }
    },

}
</script>
<template>
    <p :style="ColorObjet">Style样式绑定1</p>
</template>