Question

我在边栏中的项目已经有active-class但是如何在项目处于活动状态时更改其标签的类别？当我点击通知（让项目激活）时，我需要span和class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3" 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

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

<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 prop / data才能使其正常工作。

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

Vue.js：类切换的条件

1 个答案: