Vue 动态属性名

在 Vue 的 :class 绑定中，activeClass 两边使用方括号 [{ [activeClass]: isActive }] 是 JavaScript 的**计算属性名（Computed Property Name）**语法，这是 ES6 的特性。以下是详细解释：

1. 方括号的作用：动态计算属性名

• 在对象字面量中，[activeClass] 表示将变量 activeClass 的值作为对象的属性名。
• 例如，如果 activeClass 的值是字符串 'active'，那么对象会展开为 { 'active': isActive }。

2. 为什么需要动态属性名？

• Vue 的 :class 绑定允许你通过对象语法动态切换 class：

  { className: condition } // 当 condition 为 true 时，添加 className
  

• 但如果你希望 className 本身也是一个变量（比如从 props 或 data 中动态获取），就需要用 [activeClass] 计算属性名。

3. 对比示例

• 静态属性名（直接写死 class 名）：

  <div :class="{ active: isActive }"></div>
  

  这里 active 是固定的字符串。

• 动态属性名（通过变量指定 class 名）：

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

  如果 activeClass 的值是 'text-bold'，最终对象会是 { 'text-bold': isActive }。

4. 结合数组语法

• 外层用 [] 是因为 Vue 的 :class 支持数组语法，可以同时绑定多个 class 来源：

  [对象语法, 字符串语法]
  

• 你的例子中：
  • { [activeClass]: isActive } 是动态对象语法。
  • errorClass 是直接的字面量（如 'text-danger'）或变量。

5. 最终渲染结果

假设：

data() {
  return {
    isActive: true,
    activeClass: 'highlight',
    errorClass: 'error'
  }
}

渲染后的 class 会是：

<div class="highlight error"></div>

（因为 isActive 为 true，所以 highlight 被应用）

总结

• 方括号 [activeClass]：将变量 activeClass 的值作为对象的属性名。
• 外层数组 []：Vue 的 :class 支持多个 class 来源（对象、数组、字符串等）。
• 灵活性：这种写法允许你通过变量动态决定 class 的名称，而不仅仅是固定字符串。

这是 Vue 结合 ES6 语法提供的一种简洁而强大的 class 动态绑定方式。