vue3.0入门

Posted 2021-06-14

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节点\')