htmledit_views">

class绑定

简单对象绑定

html"><template>
<div>
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
</div>
</template>
<script>
export default{
    data(){
        return{
            isActive:true,
            hasError:true,
        }
    }
}
</script>
<style>
.active {
    font-size: 30px;
}
.text-danger {
    color: red;
}
</style>

复杂绑定

html"><template>
<div>
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
    <p :class="classObject">Class样式绑定2</p>
    <!-- 复杂绑定 -->
</div>
</template>
<script>
export default{
    data(){
        return{
            isActive:true,
            hasError:true,
            // 复杂绑定
            classObject:{
                'active':true,
                'text-danger':true
            }
        }
    }
}
</script>
<style>
.active {
    font-size: 30px;
}
.text-danger {
    color: red;
}
</style>

数组和对象嵌套的过程中，只能是数组嵌套对象，不能反其道而行。（就只能[   ,{  } ]，中括号套花括号），有点复杂不推荐用。

html"><template>
<div>
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
    <p :class="classObject">Class样式绑定2</p>
    <!-- 复杂绑定 -->
     <p :class="[arrActive,arrHasError]">Class样式绑定3</p>
     <!-- 数组绑定 -->
     <p :class="[isActive ? 'active' :  '']">Class样式绑定4</p>
     <!-- 数组复杂绑定 -->
     <p :class="[isActive ? 'active' : '',{'text-danger':hasError}]">Class样式绑定5</p>
</div>
</template>
<script>
export default{
    data(){
        return{
            isActive:true,
            hasError:true,
            // 复杂绑定
            classObject:{
                'active':true,
                'text-danger':true
            },
            arrActive:"active",
            arrHasError:"text-danger"
        }
    }
}
</script>
<style>
.active {
    font-size: 30px;
}
.text-danger {
    color: red;
}
</style>

style绑定

style不推荐使用权重高，后期不易修改。

与class类似