05vue学习——对class属性利用v-bind进行属性绑定

最新推荐文章于 2025-06-24 00:27:45 发布
原创 最新推荐文章于 2025-06-24 00:27:45 发布 · 617 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Vue中如何使用v-bind指令来绑定class属性，包括直接传递数组、使用三元表达式及对象等方法，并展示了不同方式的代码实例。

05vue学习——对class属性利用v-bind进行属性绑定

前言

前面我们提到可以使用 v-bind 对元素的属性进行绑定，class 属性也不例外，接下来让我们来学习如何对元素的class 属性通过v-bind 来进行绑定。

0.直接使用普通的方法，即没有使用v-bind来绑定class属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用普通的方法设置class属性</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        .red{
            color: #f00;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="body">
        <h1 class="red thin">{{msg}}</h1>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"我是用于测试‘对class属性利用v-bind进行属性绑定’的文字",
        flag:true,
        classSet:{
            italic:true, 
            active:false, 
            red:true}
    },
})
    </script>
</body>
</html>

该设置在浏览器显示的效果如下图：
在这里插入图片描述

由上图可得这样直接将类名赋值给class属性也可以达到我们预期的效果，为什么还要大费周章的给 class 属性设置 v-bind 指令呢？ 下面让我们来介绍利用 v-bind 对属性进行设置给我们带来了什么便利吧！

注意：在使用v-bind时，v-bind的值如果没有用引号包裹起来，则到 vm 中的 data 中去寻找，如果有用引号包裹起来，则是该值

1.使用v-bind来绑定class属性——直接传递一个数组

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07——对class属性利用v-bind进行属性绑定</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        .red{
            color: #f00;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="body">
        <!-- 使用v-bind来绑定class属性——直接传递一个数组（需要用引号包裹起来） -->
        <h1 :class="['italic','active']">{{msg}}</h1>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"我是用于测试‘对class属性利用v-bind进行属性绑定’的文字",
        flag:true,
        classSet:{
            italic:true, 
            active:false, 
            red:true}
    },
})
    </script>
</body>
</html>

该设置在浏览器显示的效果如下图：
在这里插入图片描述

由上图可得这样利用 v-bind 传递一个数组来绑定 class 属性，相比较直接传递类名的方式更加复杂，也没有什么多余的功能，为什么还要使用这个呢？接下来让我们来正真见识 v-bind 来绑定 class 属性的强大之处。
2.使用v-bind来绑定class属性——在传递的数组中使用三元表达式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07——对class属性利用v-bind进行属性绑定</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        .red{
            color: #f00;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="body">
        <!-- 用v-bind来绑定class属性——在传递的数组中使用三元表达式（需要用引号包裹起来） -->
        <h1 :class="['italic','active',flag?'thin':'']">{{msg}}</h1>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"我是用于测试‘对class属性利用v-bind进行属性绑定’的文字",
        flag:true,
        classSet:{
            italic:true, 
            active:false, 
            red:true}
    },
})
    </script>
</body>
</html>

该设置在浏览器显示的效果如下图：
在这里插入图片描述

由上图可得这样利用 v-bind 传递一个数组来绑定 class 属性，可以在这个数组里面使用三元表达式，可以通过 js 中的数据来控制该样式是否生效，是不是逐渐感受到了利用 v-bind 来绑定class 属性的强大之处呢？别急，接下来还有更好的！
3.使用v-bind来绑定class属性——在传递的数组中使用对象

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07——对class属性利用v-bind进行属性绑定</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        .red{
            color: #f00;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="body">
        <!-- 注意：在使用v-bind时，v-bind的值如果没有用引号包裹起来，则到 vm 中的 data中去寻找，如果 有用引号包裹起来，则是该值 -->
        <!-- 使用v-bind来绑定class属性——在传递的数组中使用对象（需要用引号包裹起来） -->
        <h1 :class="['italic','active',{red:flag}]">{{msg}}</h1>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"我是用于测试‘对class属性利用v-bind进行属性绑定’的文字",
        flag:true,
        classSet:{
            italic:true, 
            active:false, 
            red:true}
    },
})
    </script>
</body>
</html>

该设置在浏览器显示的效果如下图：
在这里插入图片描述

由上图可得这样利用 v-bind 传递一个数组来绑定 class 属性，可以在这个数组里面使用对象，相比较于使用三元表达式，使用对象更加符合我们的常规思维，看起来也更加简洁易懂！
4.使用v-bind来绑定class属性——直接传递一个对象

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07——对class属性利用v-bind进行属性绑定</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        .red{
            color: #f00;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div class="body">
        <!-- 直接传递一个对象（对象的属性名可带引号也可不带引号，所以这里没有使用） -->
        <h1 :class="classSet">{{msg}}</h1>
    </div>
    <script>
    let vm = new Vue({
    el:".body",
    data:{
        msg:"我是用于测试‘对class属性利用v-bind进行属性绑定’的文字",
        flag:true,
        classSet:{
            italic:true, 
            active:false, 
            red:true}
    },
})
    </script>
</body>
</html>

该设置在浏览器显示的效果如下图：
在这里插入图片描述

由上图可得这样利用 v-bind 传递一个对象来绑定 class 属性，这个对象直接在 js 代码中的 data 对象中定义好，直接使用对象名就可以获取该样式对象中已经控制是否生效的样式了，是不是很方便啊！
0563xixi
关注
Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）
架构+开发+运维
05-28 2246
1. class 属性绑定 语法示例 完整示例 2. 属性的覆盖 2.1 绑定多个值相互覆盖 语法示例 完整示例 2.2 绑定一个对象（对象成员间覆盖） 语法示例 完整示例 3. 绑定对象的计算属性 语法示例 完整示例 4. 绑定数组 4.1 直接绑定一个数组 语法示例 完整示例 4.2 覆盖顺序 4.3 绑定一个是数组的object 4.4 控制数组成员是否生效 语法示例 完整示例 再次强调顺序...
vue入门：v-bind:class
软考鸭
02-05 1245
v-bind:class 对普通属性绑定进行扩展，普通属性绑定只支持表达式。扩展为支持三目表达式、对象、数组 三目表达式 支持单个class是否添加的控制如 v-bind:class="isRed?'red':''" 对象 支持多个class 同时控制例如 v-bind:class="classObj" classObj:{ red:true, green:false, blue:true } 数组 实现动态添加、删除class v-bind:class="classArray" classA
Vue指令v-bind
最新发布
记录和分享属于我的“IT”时光。
06-24 415
v-bind指令的作用是：设置元素的属性(比如:src,title,class)。
vue中v-bind常见用法及综合案例：class点击切换
Jolly_zhang的博客
11-07 2049
vue中v-bind常见用法及综合案例：class点击切换
vue.js初级入门之v-bind的class
得之我幸
12-10 328
v-bind用于绑定html标签属性。但是，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 一、对象语法 1.最朴实明了的： &amp;amp;amp;lt;div ...
Vue使用 v-bind 绑定 class
夜听雪的博客
03-04 426
有时候class类要根据数据的不同来切换样式，可以使用v-bind绑定class，class类可以是对象，也可以是数组。 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js 做了专门...
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见...因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
详解vue中v-model和v-bind绑定数据的异同
10-14
本篇文章将深入解析Vue中的两种主要数据绑定方式：`v-model` 和 `v-bind`，以及它们之间的异同。 `v-bind`（通常简写为 `:`）主要用于单向数据绑定，即将Vue实例中的数据属性绑定到HTML元素的属性上。例如，使用 `v...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
在Vue.js中，条件循环判断、计算属性以及绑定样式是构建动态用户界面的关键特性。首先，我们来看条件判断，这包括`v-if`、`v-else-if`、`v-else`和`v-show`。 1. `v-if`指令用于在满足特定条件时才渲染元素。例如，...
Vue官方文档(5): v-bind绑定class
amadeus_liu2的博客
06-28 401
vue
vue.js—v-bind绑定Class与Style
理想主义的花最终会盛开在浪漫主义的土壤里，我的热情永远不会熄灭在现实的平凡之中，我们终将上岸，阳光万里。
06-30 5983
v-bind用于动态地绑定一个或者多个attribute,或者一个porp到表达式。首先明确一下attribute的概念，什么是attribute，attribute 是元素标签的属性。那什么是元素标签的属性？以HTML为例，例如: 这篇博客主要总结的是v-bind绑定class和style这一种情况。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。我们可以传给 v-bind:class 一个对象，以动态地切换 cl
vue中v-bind控制class和style
m0_72168336的博客
06-13 1315
当使用v-bind指令控制class和style时，可以通过动态绑定的方式根据不同的条件来添加或移除class，以及改变元素的样式。通过可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。：使用对象语法，可以根据条件来动态添加或移除class。在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class。：使用数组语法，可以根据条件来添加或移除多个class。
Vue中使用v-bind:class动态绑定多个类名
码农键盘上的梦
08-14 2574
在上述代码中，我们设置了一个类名为container的主容器元素，然后将三个样式类名（color、size和font）用数组的形式统一传递给了v-bind:class指令。在Vue.js开发中，经常需要动态绑定HTML元素的class（类名）属性，以改变元素的外观和行为。在Vue中，我们可以使用v-bind:class指令动态绑定HTML元素的class属性。具体说来，v-bind:class可以接受一个对象作为参数，在这个对象中，每个属性的键名表示一个类名，键值表示该类名是否被应用到元素上。
Vue内置指令之v-bind绑定class的介绍与举例
weixin_43275631的博客
01-26 6223
v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。 v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象 用法： 1.直接通过{}绑定一个类 <h2 :class = "{'active':isActive}">Hello World</h2> 2.通过判断传入多个值 <h2 :class="{'active':isActive
ES6的class本质和react中需要使用bind(this)的原因
大灰狼的小绵羊哥哥的博客
05-09 2830
ES6的class 我们知道ES6新出一个规范是使用class关键字来定义一个类，这在以前是没有的 在以前，需要在javascript里实现面向对象，就需要使用prototype 什么是面向对象？ 面向对象有如下几个基本特征，通常认为，只要实现了这几个特性，就认为是实现了面向对象： 1.封装 2.继承 3.多态 这里不对三个基本特征的做详细展开。只需要知道，javascript实现继承和多态...
v-bind 绑定 class、style 属性
404源码社区 - Admin404
01-17 595
1. v-bind 绑定 class 属性对象语法 对象语法的含义是:class后面跟的是一个对象，语法格式: <span :class="{类名: 布尔值}"></span> 使用示例: 当布尔值为 true 时才显示该类名 :class 属性是一个对象，对象中的键值可以是布尔值，也可以是 vue 示例中的 data 数据名称 <span :class="{actived: isShow}"></span> <span :clas..
Vue入门篇：指令修饰符，v-bind（操作class，操作style），v-model应用常见表单元素，计算属性，watch侦听器
jungleirim的博客
04-25 1270
例如，一个watch侦听器可以监视用户的输入表单字段，当用户输入变化时，它可以执行验证输入的逻辑并更新界面中的错误消息。总结：v-bind:class指令可以实现对样式的动态控制，可以根据布尔值、数组或计算属性来决定是否添加某个class。在上述例子中，元素会始终有一个base的class，并且根据isActive和error的值来添加active和error class。总的来说，watch侦听器是一种非常有用的工具，可以帮助我们更好地响应数据的变化，并执行相应的操作。依赖的数据变化，自动重新计算。
Vue动态属性绑定详解：v-bind指令
v-bind绑定class属性（对象语法） v-bind不仅可以用于绑定常规属性，还可以与`class`属性结合，实现动态添加或移除CSS类。对象语法允许我们为每个类指定一个布尔值，当该值为真时，对应的类就会被应用： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值