Vue :class动态绑定样式（附带实例）

我们可以通过 HTML 元素的 class 属性、id 属性或直接使用标签名来进行 CSS 样式的绑定，其中，最为常用的是使用 class 的方式进行样式绑定。

在 Vue 中，对 class 属性的数据绑定进行了特殊的增强，从而方便通过布尔变量控制其设置的样式是否被选用。

v-bind 指令虽然可以直接对 class 属性进行数据绑定，但如果将绑定的值设置为一个对象，就会产生一种新的语法规则，设置的对象中可以指定对应的 class 样式是否被选用。Vue 为样式绑定提供了特殊的语法，在需要动态绑定样式的场景下非常好用。

编写如下示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>class 绑定</title>
  <script src="https://unpkg.com/vue@next"></script>

  <!-- 定义测试使用的样式表 -->
  <style>
    .red  { color: red;  }
    .blue { color: blue; }
  </style>
</head>

<body>
  <div id="Application">
    <!-- 根据 isBlue / isRed 决定是否应用对应 class -->
    <div :class="{ blue: isBlue, red: isRed }">
      示例文案
    </div>
  </div>

  <script>
    const { createApp, ref } = Vue;

    const config = {
      setup() {
        // 控制样式是否生效的属性
        const isBlue = ref(true);
        const isRed  = ref(false);

        return { isBlue, isRed };
      }
    };

    createApp(config).mount("#Application");
  </script>
</body>
</html>

如以上代码所示，其中 div 元素的 class 属性的值会根据 isBlue 和 isRed 属性的值而改变，当只有 isBlue 属性的值为 true 时，div 元素的 class 属性为 blue；同理，当只有 isRed 属性的值为 true 时，div 元素的 class 属性为 red。

需要注意，class 属性可绑定的值并不会冲突，如果设置的对象中有多个属性的值都是 true，那么它们都会被添加到 class 属性中。

在实际开发中，并不一定要用内联的方式为 class 绑定控制对象，我们也可以直接将其设置为一个 Vue 组件中的数据对象，修改代码如下：
HTML 元素：

<div :class="style">
    示例文案
</div>

Vue 组件：

// 从 Vue 中解构所需 API
const { createApp, ref } = Vue;

const config = {
  setup() {
    // 控制样式选用的对象
    const style = ref({
      blue: true,
      red: false
    });

    return { style };
  }
};

修改后的代码在功能上保持不变，与之前的版本运行效果完全一致。在开发过程中，我们通常会将样式对象定义为计算属性来返回，这种方式可以显著提高组件样式控制的效率。

Vue 还支持使用数组对象来控制 class 属性，示例代码如下：
HTML 元素：

<!-- 数组中的样式表都会被添加 -->
<div :class="[redClass, fontClass]">
    示例文案
</div>

Vue 组件：

// 定义组件配置
const config = {
  setup() {
    const redclass = ref("red");   // 控制 red 类名
    const fontclass = ref("font"); // 控制 font 类名
    return { redclass, fontclass };
  }
};

此时，只需要修改对应的 redClass 和 fontClass 属性的值，即可同步更改元素绑定的样式。

Vue :class动态绑定样式（附带实例）

相关文章