Class与Style绑定(实现复杂样式需求)
前言
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。
不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
下面将分别使用对象和数组的形式,动态的绑定class列表和内联样式。
提醒
和通过表达式计算出字符串结果一样,使用对象或者数组动态绑定样式时使用的对象{ }
或者数组[ ]
同样是写在:claaa=
或者:style=
后的引号" "
里。比如:
对象
<div :class="{ active: isActive }"></div>
数组
<div :class="[activeClass, errorClass]"></div>
个人理解
可以将对象里的样式变量放在data里,然后可以控制该样式变量的变化来实现复杂的样式需求。
一、绑定HTML Class
1.对象语法
1.1 语法
可以传给 v-bind:class
一个对象,以动态地切换 class:
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active
这个 class 存在与否将取决于数据属性 isActive
的 truthiness (真实性)
。
1.2 对象语法的扩展:
- 我们也可以在对象中传入更多属性来动态切换多个 class。
- 此外,v-bind:class 指令也可以与普通的 class 属性共存。
实例:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data: {
isActive: true,
hasError: false
}
结果渲染为:
<div class="static active"></div>
分析:
上面实例中需要注意两点
v-bind:class
指令和普通的标签class属性(class="static"
)共存了v-bind:class
指令本身也可以灵活的使用数