前端_Vue_4.类与样式绑定、条件渲染

---

一、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 是不推荐的，因为这样两者的优先级不明显。