vue动态绑定css和style

动态绑定css

// 普通绑定
<div calss="css">test</div>

// 动态绑定
<div :calss="css_1">test</div>

// 一起使用,鸡肋用法
<div :calss="[css_1, 'css']">test</div>

// 数组绑定
<div :calss="cssArr">test</div>

// 对象绑定
<div :calss="cssObj">test</div>
<script>
export default {
    data() {
        return {
            css_1: 'css',
            cssArr: ['css','css_a','css_b"],
            cssObj: {
                css: true,
                css_a: flase
            }
        }
    }
}
</script>
<style lang="less" scoped>
.css{
    background-color: #e9edf1;
}
.css_a{
    width: 200px
}
.css_b{
    height: 300px;
}
</style>

动态绑定style

// 普通写法
<div style="font-size: 10px;"></div>
// 动态绑定
<div :style="{fontSize: fontze + 'px'}"></div>

<script>
export default {
    data() {
        return {
            fontze: 10
        }
    }
}
</script>