javascript - Vue.js:类切换的条件

Question

我已经为侧边栏中的项目设置了一个 active-class，但是当该项目处于事件状态时，如何更改其标签的类？我需要带有 class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3"的 span 拥有 class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3 g-color-primary g- bg-white” 当我点击“通知”(使项目处于事件状态)时。

<router-link to='/notifications'
                 class="list-group-item justify-content-between g-brd-none list-group-item-action"
                 active-class="active">
      <i class="icon-bell g-pos-rel g-top-1 g-mr-8"></i>
      Оповещения
      <span v-if="getNotificationsUnviewed > 0"
            class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3">
             {{ getNotificationsUnviewed }}
      </span>
    </router-link>

Answer 1

您需要使用 v-bind 向类传递具有 true/false 值的对象，如下所示:

<span v-if="getNotificationsUnviewed > 0"
    v-bind:class="{'u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3' : true, 'g-color-primary g-bg-white' : isActive}">
         {{ getNotificationsUnviewed }}
  </span>

让我们看看:class里面有什么:

{
  "u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3": true,
  "g-color-primary g-bg-white": isActive
}

第一个类设置将始终存在，因为值为 true，第二个类仅在 isActive 为 true 时设置。

当然，您的实例/组件必须具有 isActive 属性/数据才能使其正常工作。

See the docs了解更多信息和替代方法。