这节课,我们来看下 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()
