跟着文档学VUE3(四)- 类与样式绑定

262 阅读2分钟

Class 与 Style 的绑定技巧

关键词:Vue3、class 绑定、style 绑定、动态样式、响应式 UI

在 Vue 开发中,我们经常需要根据组件状态动态地控制元素的类名和内联样式。Vue 提供了非常强大的 :class:style 指令,不仅可以绑定字符串,还能绑定对象或数组,实现灵活的 UI 样式切换。

🧱 一、绑定 class 的多种方式

💡 基本原理:

  • class 是 HTML 元素的一个 attribute。

  • 在 Vue 中,使用 v-bind:class 或简写为 :class 来动态绑定 class。

  • Vue 对 class 绑定做了增强,支持传入:

    • 字符串
    • 对象
    • 数组

✅ 1. 使用对象绑定 class

适用于需要根据布尔值来切换 class 的场景。

// 直接绑定一个对象
<div :class="classObject"></div>
// 内联字面量
<div
  class="static
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

data() {
  return {
    isActive: true,
    hasError: false,
    classObject: { active: true, 'text-danger': false }
  }
}

💡 小贴士:
  • 如果类名是烤串命名(kebab-case),需要用引号包裹,如 'text-danger'
  • 可以将对象提取成一个计算属性,提升可读性和复用性

✅ 2. 使用数组绑定 class

适用于需要绑定多个 class 名字的情况。

📌 动态条件渲染?

可以结合三元表达式或嵌套对象来实现:

<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger',
    isActive: true,
  }
}

// 🧾渲染结果
<div class="active text-danger"></div>

✅ 3. 在组件上使用 class

单根元素组件:

当你给组件添加 class 时,这些类会自动合并到组件的根元素上。

多根元素组件:

如果组件有多个根元素,则需显式指定哪个元素接收 class

示例代码
<!-- 子组件模板 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
<!-- 在使用组件时 -->
<MyComponent class="baz boo" />

<p class="baz boo">Hi!</p>

🎨 二、绑定 style 内联样式的高级用法

💡 基本原理:

  • :style 支持绑定 JavaScript 对象,用于动态设置内联样式。
  • 支持 camelCase 和 kebab-case 的 key 写法。

✅ 1. 使用对象绑定 style

// 推荐使用 camelCase, 如果是kebab-cased,则key需要对应它在css中的实际名称
<div :style="{ 'font-size': fontSize + 'px' }"></div>

// 也可以直接绑定一个对象
<div :style="styleObject"></div>
data() { 
    return { 
        styleObject: { color: 'red', fontSize: '13px' } 
        } 
 }

✅ 2. 使用数组绑定多个样式对象

可以传入多个样式对象,后面的样式会覆盖前面的:

 
// 也可以绑定一个包含多个样式对象的数组
<div :style="[baseStyles, overridingStyles]"></div>

✅ 3. 自动处理浏览器前缀

  • 如果在css中使用了需要浏览器特殊前缀的css,Vue在运行时会检查该属性是否支持在当前浏览器中使用,如果不支持,会自动加前缀
  • 可以提供多个不同前缀的值,只会渲染浏览器支持的最后一个值
// 不需要特别前缀的浏览器,最后会渲染为display: flex
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>