class 与 style 动态绑定一般通过对象或者数组来实现。
对象写法:适用于要绑定的样式名字样式确定,但动态决定用不用。
数组写法:适用于要绑定的样式名字样式不确定。
1.class对象写法
可以传给v-bind:class一个对象,以动态地切换class
|
在对象中可传入更多字段来动态切换多个class,此外,v-bind:class指令也可以与普通的class attribute(属性)共存。如下:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
和data如下:
data: {
isActive: true,
hasError: false
}
结果渲染为:
<div class="static active"></div>
2..class数组写法
我们可以把一个数组传给v-bind:class,以应用一个class列表:
|
|
渲染为:
|
如果想根据条件切换列表中的class,可以用三元表达式子:
|
这样写将始终添加errorClass,但是只有在isActive是trrue时才添加activeClass
1. style对象写法
v-bind:style
的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好,这会让模板更清晰:
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
2.style数组语法
v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上。
<div v-bind:style="[baseStyles, overridingStyles]"></div>