我已经为侧边栏中的项目设置了一个 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>
最佳答案
您需要使用 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了解更多信息和替代方法。
关于javascript - Vue.js:类切换的条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48582515/