v-bind

DOM 元素经常会动态地绑定一些属性值,当数据变化时,就会重新渲染。
最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定。

绑定 class

对象语法

当需要动态切换 class 时,可以给 class 绑定一个对象,对象的键是类名,值是布尔值
当 class 的表达式过长或者逻辑复杂时,还可以绑定一个计算属性。

数组语法

当需要应用多个 class 时,可以给 class 绑定一个数组,数组成员就是类名
对象和数组可以混用。

绑定内联样式 style

css 属性名称使用驼峰命名( camelCase )或短横分隔命名( kebab-case )
Vue 会自动给特殊的 css 属性名称增加前缀,比如 transform 等 CSS3 中的属性。

对象语法

很像直接在元素上写 CSS。
常用计算属性。

数组语法

应用多个样式对象时,可以使用数组语法,在实际业务中并不常用。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容