样式绑定（class属性）

最新推荐文章于 2025-02-17 15:12:51 发布

原创最新推荐文章于 2025-02-17 15:12:51 发布 · 785 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

一.前提

在项目开发中，除了需要定义页面结构外，还需要美化页面的样式，从而吸引用户的目光。在Vue中，通过绑定class属性和style属性可以实现元素的样式绑定。样式绑定后，可以很方便地更改元素的样式。本节将对样式绑定进行详细讲解

二.绑定class属性

在Vue中，通过更改元素的class属性可以更改元素的样式，而对class属性的操作以通过v-bind来实现。使用v-bind绑定class属性时，可以将class属性值绑定为字符串对象或数组，下面分别进行讲解

在Vue中，可以将class属性值绑定为字符串，示例代码如下：

<template>
2<div v-bind:c1 a S S = " C l a S S N a m e " > < / d i V >
3 </template>
4 <script setup>
5 const c1 a s s N a m e = 'box'
6 </script>

在上述代码中，第2行代码中的className表示要绑定的类名。className的值是字符串类型，需在<script>标签中定义

运行上述代码后，div元素的渲染结果如下

<div class="box"></div>

接下来通过实际操作的方式演示如何为class 属性绑定字符串，具体步骤如下
① 创建 src\components\ClassStr. vue 文件, 具体代码如下:

<template>
 <div v-bind:class="className">梦想</div>
 </template>
 <script setup>
 const className = 'box'
 </script>
<style>
box{
border: 1px solid black;
    }
</style>

在上述代码中，第2行代码用于绑定class 属性，属性值为className；第5行代码定义了className, 表示类名; 第8~10行代码定义了 box的样式类。
② 修改src\main. js文件，切换页面中显示的组件，具体代码如下:

import App from './components/ClassStr. vue'

保存上述代码后, 在浏览器中访问 http://127.0.0.1:5173/, 为class属性绑定字符串的页面效果和控制台如图2-38所示。

从图2-38可以看出，页面中的元素都已经正确设置了样式，说明当前成功完成了样式绑定。

三.将class 属性值绑定为对象

在 Vue中，可以将class 属性值绑定为对象，从而动态地改变class 属性值。对象中包含的属性名表示类名，属性值为布尔类型。如果属性值为 true，表示类名生效，否则类名不生效

将 class 属性值绑定为对象的示例代码如下：

 <template>
 <div v-bind:class="{ className: isActive }"></div>
 </template>
 <script setup>
 import { ref } from 'vue'
 coonst isActive =ref(true)
 </script>

四. 将 class 属性值绑定为数组

在 Vue中， v-bind 指令中的 class属性值除了字符串和对象外，还可以是一个数组，用以动态地切换HTML 的class 属性，数组中的每个元素为要绑定的类名。
将 class 属性值绑定为数组的示例代码如下：

1 <template>
2 <div v-bind:class="[className1, className2]"></div>
3 </template>
4 <script setup>
5 import { ref } from 'vue'
6 con st className1 = ref('active')
7 const className2 = ref('error')
8 </script>

在上述代码中,第2行代码中的classNamel和className2表示要绑定的类名;第6~7行代码定义了相应的类名。
运行上述代码后，div元素渲染结果如下：