Vue 3 基础笔记 4 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 13 天，今天在开发组队大项目的

这是我参与「第五届青训营」伴学笔记创作活动的第 13 天，今天在开发组队大项目的过程中，继续学习了如何从头开发一个 Vue 3 的项目，包括 Vue 3 的基础语法等。

Class 与 Style 绑定

在模板中，我们可能会为标签动态指定 class 属性 (类) 和 style 属性 (内联样式)，之前学到过可以使用 v-bind (简写 : ) 绑定字符串来定义动态属性，除此以外，Vue 还支持使用对象或者数组来动态定义 class 属性和 style 属性。

可以在 :class 中传入一个对象，对于每个键值对，键表示 class 名，值表示是否启用。最终在 HTML 中只会出现值为 true 的 class 名。比如：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

const isActive = ref(true)
const hasError = ref(false)

当 isActive 的值为 true 时，<div> 的 class 属性中才会出现 active。当 hasError 的值为 true 时，<div> 的 class 属性中才会出现 text-danger。

上述代码会渲染为 class="active"。

可以在 :class 中传入一个数组，对于数组中每个字符串，class 属性中都会出现一个对应的值。

可以在 :style 中传入一个对象，对于每个键值对，键表示样式名，值表示样式内容。比如：const

<div :style="styleObject"></div>

styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})

对象会按照 CSS 的语法进行渲染。

在模板中，我们可能会动态地渲染或者不渲染一些内容，使用条件渲染可以方便地控制这些内容地渲染与否。

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-else 指令与 v-if 一起使用，当 v-if 的值为假时，渲染 v-else 地内容。

v-else-if 指令与 v-if 一起使用，当 v-if 的值为假时，才会根据 v-else-if 的值判断渲染与否。

在模板内部，可以使用 <template> 包裹多个标签，并在 <template> 标签上使用 v-if、v-else 或者 v-else-if 指令。这些标签会根据条件一同渲染或者不渲染。渲染的结果中不会出现 <template> 标签。

v-if 指令用于条件性地控制一块内容的显示。当值为假时，会在标签中加入 display: none 的 CSS 样式，但是内容还是存在 DOM 中的。