1：对象语法

<div id="review-modal" class="review-modal dialog-panda-skip" :class="{ hidden: !isModalShow }">

语法：:class=”{ 类名1: 布尔值1, 类名2: 布尔值2 }”

对象的「键」是要控制的类名，「值」是一个布尔值（true/false），决定该类是否添加：

若 !isModalShow 为 true → 给元素添加 hidden 类；

若 !isModalShow 为 false → 不添加 hidden 类。

适用场景：需要独立控制多个类的添加 / 移除（比如同时控制 hidden 和 active 两个类），例如：

<!-- 同时控制 hidden 和 active 两个类，互不影响 -->
:class="{ 
  hidden: !isModalShow,  // hidden 类由 isModalShow 控制
  active: isCurrent     // active 类由 isCurrent 控制
}"

2：表达式字符串

<span v-for="star in 5"
      :key="star"
      :data-value="star" class="star"
      :class="product.rating >= star ? 'active' : ''"
      @click="setRating(product.id, star)">
  ★
</span>

语法：:class=”条件 ? ‘类名1’ : ‘类名2/空'”

通过「三元运算符」这个表达式，动态返回一个具体的类名字符串（或空字符串）。

条件成立（product.rating >= star 为 true）→ 返回 ‘active’ → 给元素添加 active 类；

条件不成立 → 返回 ”（空字符串）→ 不添加任何类。

适用场景：需要在「“加某类” 和 “不加类”」之间二选一，或在「两个类」之间切换（比如 :class=”isRed ? ‘red’ : ‘blue'”）。