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!

成为优秀的前端工程师!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容