vue3.0入门（三）

class绑定

对象绑定

:class=‘{active:isActive}‘  // 相当于class="active"
:class="‘active‘"  // 相当于class="active" ，这里绑定的是一个字符串
:class=‘classObject‘  // 配合计算属性使用，绑定一个函数

Vue.createApp({
    data(){
        return {
            isActive: true
        }
    },
    computed: {
        classObject(){
            return{}
        }
    }
}).mount(‘dom节点‘)

数组语法绑定

.active{
    color: red;
}
.font{
    font-size: 20px;
}

:class=‘[activeClass, fontClass]‘  // 绑定对应css
// 绑定三目运算，后者表示isFont为true则绑定(并上)后面的样式
:class=‘[isActive ? activeClass : "", isFont&&fontClass]‘
:class=‘[{active: isActive}, fontClass]‘  // 也可在数组中绑定对象

Vue.createApp({
    data(){
        return {
            isActive: true
            ,isFont: false
            ,activeClass: ‘active‘   // 绑定style
            ,fontClass: ‘font‘
        }
    }
}).mount(‘dom节点‘)

vue3.0入门（三）

原文：https://www.cnblogs.com/chniny/p/14881568.html