文章目录
一、Class与Style绑定
数据绑定的一个常见需求场景是操纵元素的CSS class列表和内联样式。因为 class 和 style 都是attribute,我们可以和其他attribute一样使用 v-bind将它们和动态字符串绑定。但是,在处理比较复杂的绑定时,通过拼接生成字符串是麻烦且易出错的。因此,Vue专门为class 和 style的v-bind用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。
内联样式 |
---|
内联样式,又称行内样式,就是在HTML标签内部通过style属性来直接设置元素的CSS样式, 语法: <标记 style="样式的属性名1:样式的属性值1;属性名2:属性值2;......"></标记> 由于内联样式直接插入标签中,故是最直接的一种方式,同时也是修改最不方便的样式 |
1.1. 绑定HTML class
1.1.1. 绑定对象
HTML中的class |
---|
在对网页中的class不了解的情况下,从面向对象直接跳转到网页开发,很可能会被class搞晕。因为网页中的class和面向对象中的class(类)有着天壤之别。 首先,它的语法是这样的: <element class="classname"> // 在标签元素中的class attribute 标签中的class 属性通常用于指向样式表的类。在样式表中,定义类的样式。然后给标签的class attribute赋予该类。该标签的就会获得该类的样式。 |
我们可以给 :class (v-bind:class的缩写)传递一个对象来动态切换class:
<div :class="{ active: isActive }"></div>
上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。
你可以在对象中写多个字段来操作多个class。此外, :class 指令也可以和一般的 class attribute共存。举例来说,下面这样的状态:
data() {
return {
isActive: true,
hasError: false
}
}
配合以下模板:
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
渲染的结果会是:
<div class="static active"></div>
当 isActive 或者 hasError 改变时,class列表会随之更新。举例来说,如果 hasError 变为 true,class列表也会变成 “static active text-danger”。
前文讲过,布尔型attribute会根据true和false值来决定attribute是否会存在于DOM上。这边类似。
绑定的对象并不一定需要写成内联字面量的形式,也可以直接绑定一个对象:
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
<div :class="classObject"></div>
这也会渲染出相同的结果。我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧:
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
<div :class="classObject"></div>
1.1.2. 绑定数组
我们可以给 :class 绑定一个数组来渲染多个 CSS class:
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
<div :class="[activeClass, errorClass]"></div>
渲染的结果是:
<div class="active text-danger"></div>
如果你也想在数组中有条件地渲染某个class,你可以使用三元表达式:
<div :class="[isActive ? activeClass : '', errorClass]"></div>
errorClass 会一直存在,但 activeClass 只会在 isActive 为真时才存在。
然而,这可能在有多个依赖条件的class时会有些冗长。因此,也可以在数组中嵌套对象:
<div :class="[{ active: isActive }, errorClass]"></div>
1.1.3. 在组件上使用
本节假设你已经有了Vue组件的知识基础。如果没有,你也可以暂时跳过,以后再阅读。
对于只有一个根元素的组件,当你使用了 class attribute 时,这些class会被添加到根元素上,并与该元素上已有的class合并。
举例来说,如果你声明了一个组件名叫 MyComponent,模板如下:
<!--子组件模板-->
<p class="foo bar">Hi!</p>
在使用时添加一些class:
<!--在使用组件时-->
<MyComponent class="baz boo"/>
渲染出的HTML为:
<p class="foo bar baz boo">Hi</p>
Class的绑定也是同样的:
<MyComponent :class="{ active: isActive }"/>
当 isActive 为真时,被渲染的HTML会是:
<p class="foo bar active">Hi</p>
如果你的组件有多个根元素,你将需要指定哪个根元素来接收这个class。你可以通过组件的$attrs 属性来实现指定:
$ |
---|
$符号是美元的简称,读作dollar,发音英 [ˈdɒlə(r)];美 [ˈdɑ:lə(r)]。 Vue在组件实例上暴露的内置API使用 $ 作为前缀。 |
<!--MyComponent 模板使用 $attrs 时-->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
<MyComponent class="baz"/>
这将被渲染为:
<p class="baz">Hi!</p>
<span>This is a child component</span>
1.2. 绑定内联样式
1.2.1. 绑定对象
:style 支持绑定JavaScript对象值,对应的是HTML元素的style属性:
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
尽管推荐使用camelCase(驼峰式),但 :style 也支持 kebab-cased(短横线式) 形式的CSS属性key(对应其CSS中的实际名称),例如:
<div :style="{ 'font-size': fontSize + 'px' }"></div>
直接绑定一个样式对象通常是一个好主意,这样可以使模板更加简洁:
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
<div :style="styleObject"></div>
同样的,如果样式对象需要更复杂的逻辑,也可以使用返回样式对象的计算属性。
1.2.2. 绑定数组
我们还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上:
<div :style="[baseStyles, overridingStyles]"></div>
1.2.3. 自动前缀
当你在 :style 中使用了需要浏览器特殊前缀的CSS属性时,Vue会自动为他们加上相应的前缀。Vue是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性,那么将尝试加上各个浏览器特殊前缀,以找到哪一个是被支持的。
1.2.4. 样式多值
你可以对一个样式属性提供多个(不同前缀的)值,例如:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
数组仅会渲染浏览器支持的最后一个值。在这个示例中,在支持不需要特别前缀的浏览器中会渲染为 display: flex。
二、条件渲染
2.1. v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
2.2. v-else
也可以用 v-else 为 v-if 添加一个 “else区块”。
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别。
2.3. v-else-if
顾名思义, v-else-if 提供的是相应于 v-if 的 “else if区块”。它可以连续多次重复使用:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
和 v-else 类似,一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。
2.4. <template> 上的 v-if
因为 v-if 是一个命令,他必须依附于某个元素。但如果我们想要切换不止一个元素呢?在这种情况下我们可以在一个 <template> 元素上使用 v-if ,这只是一个不可见的包装器元素,最后渲染的结果并不会包含合格 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else 和 v-else-if 也可以在 <template> 上使用。
2.5. v-show
另一个可以用来按条件显示一个元素的指令是 v-show 。其用法基本一样:
<h1 v-show="ok">Hello!</h1>
不同之处在于 v-show 会在DOM渲染中保留该元素;v-show 仅切换了该元素上名为 display 的CSS属性。
v-show 不支持在<template>元素上使用,也不能和 v-else 搭配使用。
2.6. v-if vs. v-show
v-if 是 “真实的” 按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的:如果在初次渲染时条件值为false,则不会做任何事。条件区块只有当条件首次变为true时才被渲染。
相比之下, v-show 简单许多,元素无论初始条件如何,始终会被渲染,只有CSS display属性会被切换。
总的来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show 较好;如果在运行时绑定条件很少改变,则 v-if 会更合适。
2.7. v-if 和 v-for
当 v-if 和 v-for 同时存在于一个元素上的时候, v-if 会首先被执行。
⚠ 警告 |
---|
同时使用 v-if 和 v-for 是不推荐的,因为这样两者的优先级不明显。 |