class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。
v-bind:class 可以简写为 :class。
通过布尔值控制class
<template>
<div>
<p :class="{ 'red-text': isRedText }">这是一个简单的 class 绑定示例。</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const isRedText = ref(false);
</script>
<style scoped>
.red-text {
color: red;
}
</style>
class 属性绑定
我们可以为 v-bind:class 设置一个对象,从而动态的切换 class: