Vue 教程第三篇—— 绑定 class

绑定 class

对象语法

v-bind:class="{样式名: 结果为 boolean 的表达式}"，表达式结果为 true，则元素 class="样式名"，否则元素 class=""

渲染结果

也可以写成

    data: {
        classObject: {
            className1: false,
            className2: true
        }
    }

渲染结果

还可以通过计算属性的方式

    computed: {
        classObjectComputed: function(){
            return{
                className1: true,
                className2: true
            }
        }
    }

渲染结果

数组语法

v-bind:class="[]"，数组元素可以为表达式，也可以为字符串，如果是字符串则直接输出为样式名

    data: {
        class1: 'className1',
        class2: 'className2',
        active: true
    }

渲染结果

也可以用数据对象的方式，解析的逻辑和对象语法一样

渲染结果

绑定 style

对象语法

在对象当中，CSS 的属性名要用驼峰式表达：fontSize 解析成 font-size

    data: {
        color: 'red',
        fontSize: '12px'
    }

渲染结果

数组语法

    data: {
        styleObject: {
            color: 'red',
            fontSize: '12px'
        }
    }

渲染结果

css作用域——scoped