面试题：Vue 中 :class 和 :style 有几种表示方式？

在 Vue 中，:class 和 :style 是动态绑定类和样式的常用方式。它们支持多种表示方式，以下是详细的说明和示例：

---

一、:class 的表示方式

:class 用于动态绑定 HTML 元素的 class 属性，支持以下三种表示方式：

1. 对象语法

• 通过对象动态切换 class，对象的键是类名，值是布尔值（true 表示添加，false 表示移除）。
• 示例：

  <template>
    <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        isActive: true,
        hasError: false
      };
    }
  };
  </script>

• 渲染结果：
  

  <div class="active"></div>

2. 数组语法

• 通过数组动态绑定多个 class。
• 示例：

  <template>
    <div :class="[activeClass, errorClass]"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        activeClass: 'active',
        errorClass: 'text-danger'
      };
    }
  };
  </script>

• 渲染结果：
  

  <div class="active text-danger"></div>

3. 结合对象和数组语法

• 可以在数组中使用对象语法，动态切换 class。
• 示例：

  <template>
    <div :class="[{ active: isActive }, errorClass]"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        isActive: true,
        errorClass: 'text-danger'
      };
    }
  };
  </script>

• 渲染结果：
  

  <div class="active text-danger"></div>

---

二、:style 的表示方式

:style 用于动态绑定 HTML 元素的样式，支持以下两种表示方式：

1. 对象语法

• 通过对象动态绑定样式，对象的键是 CSS 属性名，值是样式值。
• 示例：

  <template>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        activeColor: 'red',
        fontSize: 14
      };
    }
  };
  </script>

• 渲染结果：
  

  <div style="color: red; font-size: 14px;"></div>

2. 数组语法

• 通过数组动态绑定多个样式对象。
• 示例：

  <template>
    <div :style="[baseStyles, overridingStyles]"></div>
  </template>

  <script>
  export default {
    data() {
      return {
        baseStyles: {
          color: 'red',
          fontSize: '14px'
        },
        overridingStyles: {
          fontWeight: 'bold'
        }
      };
    }
  };
  </script>

• 渲染结果：
  

  <div style="color: red; font-size: 14px; font-weight: bold;"></div>

---

三、注意事项

1. 自动添加前缀：

• Vue 会自动为需要浏览器前缀的 CSS 属性添加前缀（如 transform）。

2. 多值语法：

• 可以为 CSS 属性提供多个值（数组形式），Vue 会渲染浏览器支持的最后一个值。
• 示例：
  

  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

3. 绑定单位：

• 对于需要单位的 CSS 属性（如 width、height），可以直接绑定数值，Vue 会自动添加 px 单位。
• 示例：

  <div :style="{ width: 100 }"></div>

---

总结

• :class 的表示方式：

1. 对象语法：{ className: boolean }
2. 数组语法：[class1, class2]
3. 结合对象和数组语法：[{ className: boolean }, class2]

• :style 的表示方式：

1. 对象语法：{ cssProperty: value }
2. 数组语法：[styleObject1, styleObject2]

通过灵活使用这些语法，可以轻松实现动态类和样式的绑定。