在数据绑定中，最常见就是动态绑定元素的 class 或内联样式 style 咯，它们也是 HTML 的属性，所以可以使用 v-bind 指令 。
1 绑定 class
1.1 对象语法
使用 v-bind:class 属性，实现动态切换 class。
html：
复制代码看得见我嘛
js：
复制代码
输出结果：
看得见我嘛
注意： :class 是 v-bind:class 的简写形式。
示例中的类名 hidden 依赖于数据 isHidden ，当 isHidden 为 true 时， div 就会拥有类名 hidden，为 false 时就没有该类名 。
我们也可以一次传入多个属性，而且 :class 可以和常规的 class 同时使用。
html：
复制代码看得见我嘛
js：
复制代码
输出结果：
看得见我嘛
当 :class 中的某个属性值为 true 时，就会加载对应的类名。
当 :class 的表达式过长或逻辑复杂时，我们可以通过计算属性来绑定。
html：
复制代码
js：
var app2 = new Vue({ el: '#app2', data: { isHidden: false, isBigger: true }, computed: { customClasses: function () { return { display: !this.isHidden, 'bigger-text': !this.isHidden && this.isBigger } } }});复制代码 输出结果：
**注意：**如果样式名称带有 -，那么必须加上单引号（示例中的 bigger-text）才能被正确识别。
1.2 数组语法
也可以使用数组语法，给 :class 绑定一个 class 数组。
html：
复制代码号外！号外
js：
复制代码
输出结果：
号外！号外
数组中的元素也可以使用三元表达式来计算
html：
复制代码号外！号外
js：
var app2 = new Vue({ el: '#app2', data: { isStrong:true, strongerClass:'strong' }});复制代码 输出结果：
号外！号外
当需要设置的 class 很多时，我们可以在数组语法的基础上使用对象语法，从而简化表达式，让代码变得更易维护。
html：
复制代码号外！号外
js：
var app3 = new Vue({ el: '#app3', data: { isStrong:true }});复制代码 输出结果：
号外！号外
也可以在 computed 或 methods 中返回需要设定的数组。
html：
复制代码号外！号外
js：
var app4 = new Vue({ el: '#app4', data: { size: 'small', isGreen: true }, computed: { btnClass: function () { return [ 'btn', { ['btn-' + this.size]: this.size !== '', ['btn-green']: this.isGreen } ]; } }});复制代码 输出结果：
号外！号外
注意： 上述示例使用了 ECMAScript 6 语法，所以在 webStorm 中需要进行设置（Setting → JavaScript → 选择 ECMAScript 6 ）否则会出现红色波浪线哦：
在业务中会经常会利用计算属性为元素动态设置类名，尤其是在编写可复用的组件时。所以在开发过程中，如果表达式较长或者逻辑较为复杂，建议优先使用计算属性哦O(∩_∩)O~
1.3 应用于组件
如果直接在自定义组件中使用 class 或 :class，那么样式规则就会直接应在这个组件的根元素上。
html：
复制代码
js：
复制代码
css：
复制代码
渲染后代码：
不懂基因测序的学霸不是好的人工智能公司 CEO
：
这种方式仅适用于把样式应用于自定义组件的根元素。如果需要给自定义组件中的子元素设置样式，我们可以使用组件的 props 来实现。
2 绑定内联样式
也可以使用 v-bind:style 或 :style 直接给 HTML 元素绑定样式，它也有对应的对象语法与数组语法。
html：
复制代码马斯克太空网计划扩大 FCC已允许1.2万颗卫星入轨
js：
复制代码
因为 JS 属性不支持短横分隔命名，所以我们这里使用 CSS 也支持的驼峰命名法。
渲染后代码：
马斯克太空网计划扩大 FCC已允许1.2万颗卫星入轨
：