绑定 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