【Vue.js基础教程】 第5章 Class 与 Style 绑定
【Vue.js基础教程】 第5章 Class 与 Style 绑定
代码简单说
发布于 2026-06-16 15:26:09
发布于 2026-06-16 15:26:09
Vue.js基础教程 第5章 Class 与 Style 绑定
欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中
在这里插入图片描述
Class 与 Style 绑定
在开发过程中，我们经常需要动态操作元素的 class 和内联样式。这些都是常见的属性，Vue.js 提供了非常便捷的方式来实现数据与它们的绑定。通过 v-bind 指令，我们可以轻松地绑定动态的 class 和 style，并且 Vue.js 还为我们提供了增强的语法，支持绑定对象或数组类型的数据。
绑定 HTML Class
对象语法
最常见的方式是使用对象语法，传给 v-bind:class 一个对象，动态控制类的切换：
<div v-bind:class="{ active: isActive }"></div>这里，active 类的存在与否将由数据属性 isActive 的值决定。isActive 为 true 时，active 类会被添加到该元素上，反之则不会。
你可以传入多个属性来绑定多个 class：
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>对应的 data 如下：
data: {
isActive: true,
hasError: false
}渲染的结果是：
<div class="static active"></div>如果 hasError 变为 true，class 列表将更新为 "static active text-danger"。
此外，我们可以将对象绑定到计算属性上，这样能让模板更加简洁且易于维护：
<div v-bind:class="classObject"></div>data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}数组语法
除了对象语法，Vue 还支持数组语法，我们可以将多个类名放在数组中传递给 v-bind:class：
<div v-bind:class="[activeClass, errorClass]"></div>data: {
activeClass: 'active',
errorClass: 'text-danger'
}渲染结果为：
<div class="active text-danger"></div>我们还可以根据条件动态切换数组中的类：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>如果 isActive 为 true，则会添加 activeClass；否则，activeClass 不会被添加。
用在组件上
当 class 绑定到自定义组件时，类会被添加到组件的根元素上。例如，定义了一个组件：
Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' })使用该组件并传递 class：
<my-component class="baz boo"></my-component>渲染结果为：
<p class="foo bar baz boo">Hi</p>如果绑定的数据属性改变，class 也会随之更新：
<my-component v-bind:class="{ active: isActive }"></my-component>如果 isActive 为 true，渲染结果为：
<p class="foo bar active">Hi</p>绑定内联样式
对象语法
v-bind:style 的对象语法与 CSS 很相似，可以将 JavaScript 对象直接绑定到元素的 style 上：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {
activeColor: 'red',
fontSize: 30
}你也可以将样式对象单独定义，并绑定到元素：
<div v-bind:style="styleObject"></div>data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}数组语法
v-bind:style 支持数组语法，可以绑定多个样式对象到同一个元素：
<div v-bind:style="[baseStyles, overridingStyles]"></div>自动添加前缀
当使用需要浏览器前缀的 CSS 属性时，Vue 会自动添加相应的前缀。例如，transform 属性就会自动加上前缀：
<div v-bind:style="{ transform: rotate }"></div>多重值
从 Vue 2.3.0 版本开始，v-bind:style 还支持为样式属性提供一个包含多个值的数组，这对于带有前缀的属性非常有用。例如：
<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>这样，如果浏览器支持 flex，就会使用 flex，如果不支持则使用其他前缀形式。
通过这些技巧，你可以非常灵活地绑定 class 和 style，使得 Vue.js 在操作元素样式时变得更加简洁与高效。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-12-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号