vue 3 第二十七章：样式（动态class、动态style）

2024-07-13 12:26| 来源: 网络整理| 查看: 265

文章目录动态 class动态 style 在 Vue 中，我们可以使用动态绑定语法来动态地添加类名或样式。本章将介绍 Vue 3 中如何使用动态绑定语法来动态地添加类名或样式。

动态 class

在 Vue 中，我们可以使用 :class 或 v-bind:class 指令来动态地添加类名。例如，下面的例子中，我们可以根据 isActive 的值动态地为元素添加 active 类：

Dynamic Class 切换 import { ref } from "vue"; const isActive = ref(false); .active { color: red; }

在上面的例子中，:class="{ active: isActive }" 的意思是，当 isActive 的值为 true 时，为元素添加 active 类。

除了使用对象语法以外，我们还可以使用数组语法来动态地添加类名。例如，下面的例子中，我们可以根据 isActive 和 isHighlighted 的值动态地为元素添加类：

Dynamic Class import { ref } from "vue"; const isActive = ref(true); const isHighlighted = ref(false);

在上面的例子中，:class="[isActive && 'active', isHighlighted && 'highlighted']" 的意思是，当 isActive 的值为 true 时，为元素添加 active 类；当 isHighlighted 的值为 true 时，为元素添加 highlighted 类。

动态 style

在 Vue 中，我们可以使用 :style 或 v-bind:style 指令来动态地添加样式。例如，下面的例子中，我们可以根据 color 的值动态地为元素设置颜色：

Dynamic Style import { ref } from "vue"; const color = ref("red");

在上面的例子中，:style="{ color }" 的意思是，为元素设置颜色，颜色的值为 color 变量的值。

除了使用对象语法以外，我们还可以使用数组语法来动态地添加样式。例如，下面的例子中，我们可以根据 fontSize 和 lineHeight 的值动态地为元素设置样式：

Dynamic Style import { ref } from "vue"; const fontSize = ref("18px"); const lineHeight = ref("1.5");

【本文地址】

公司简介

联系我们