既然v-bind可以动态绑定标签的属性,那么也可以用v-bind来处理class和style,只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组

绑定 HTML Class:

对象语法:

我们可以传给 v-bind:class 一个对象,以动态地切换 class ,对象的属性名就是要给标签添加的类名,而决定类是否要显示的则是键值的真假,这里键值既可以是表达式也可以是data中的数据
这里写图片描述
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值

这里写图片描述
这里如果动态计算函数currentInde的返回结果等于index的值,就会显示出类current

我们也可以在对象中传入更多属性用来动态切换多个 class 。此外, v-bind:class 指令可以与普通的 class 属性共存
这里写图片描述
如下 data:
这里写图片描述
渲染为:
这里写图片描述
你也可以直接绑定数据里的一个对象:
这里写图片描述

数组语法:

我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表,数组的值并不是要添加到标签中的,而是其在data中对应的值才是真正要添加到DOM中的
这里写图片描述
渲染为:
这里写图片描述
如果你也想根据条件切换列表中的 class ,可以用三元表达式:
这里写图片描述
此例始终添加 errorClass ,但是只有在 isActive 是 true 时添加 activeClass

不过,当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法
这里写图片描述

用在组件上:

当你在一个定制的组件上用到 class 属性的时候,这些类将被添加到根元素上面,这个元素上已经存在的类不会被覆盖

声明组件的一种方式是通过”Vue.component()”

例如,如果你声明了这个组件:
这里写图片描述
然后在使用它的时候添加一些类
这里写图片描述
HTML 最终将被渲染成为
这里写图片描述
同样的适用于绑定 HTML class
这里写图片描述
当 isActive 为 true 的时候,HTML 将被渲染成为
这里写图片描述

绑定内联样式:

对象语法:

v-bind:style 的对象语法十分直观——看着非常像 CSS ,其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case)
这里写图片描述
直接绑定到一个样式对象通常更好,让模板更清晰
这里写图片描述

数组语法:

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上
这里写图片描述

Logo

前往低代码交流专区

更多推荐