这节课,我们来看下 Vue 中动态设置样式的几种方式。在 Vue 中有专门为 class
和 style
的 v-bind
用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。
我经常用的一种模式就是使用 boolean
标志,如下所示:
当 disabled 为 true 时,这个组件被禁用了。
.disabled-component {
background-color: gray;
color: darkgray;
cursor: not-allowed;
}
这里通过一个变量或计算属性 disabled
来开启或关闭 'disabled-component'
,当 disabled
为 true
时,开启样式 'disabled-component'
,否则关闭,这样就能简单动态的设置样式了。
disabled()