Vue2学习笔记：vue的Class与Style绑定

一、绑定HTML Class

①对象语法（对象中的属性值为true时才能添加class）

渲染结果为：

实现同样的效果，也可以直接绑定数据里的一个对象，这种写法更加清爽！

也可以计算属性，即在computed中定义函数

尤大神说这种模式很强大，我暂时没感受到没，待探索

②数组语法（不止可以传对象，还可以传数组）

渲染结果为：

此例始终添加errorClass，但是只有在isActive是 true 时添加activeClass。

③With Components

这个部分竟然没有中文文档，不过还好咱能看懂。

当为组件添加class时，这些classes会被重新添加到根元素上，例如：

重复添加了class:

但是有一个比较有趣的地方是，可以在自定义的组件标签上添加active class，为真时添加到根元素active，为假时删除active。

二、绑定内联样式

①对象语法

②数组语法

将多个样式对象应用到一个元素上：

③自动添加前缀

当v-bind:style使用需要特定前缀的 CSS 属性时，如transform，Vue.js 会自动侦测并添加相应的前缀。

学好Vue！

成为优秀的前端工程师！