[英]Vue.js v-if with OR doesn't work properly
我的代码中有一个逻辑错误,但我不明白为什么。
如果用户在一个名为BasicSport
的组中或者如果他在一个名为Basic
的组中,我想隐藏一个名为History
的选项卡。
我通过以下方式实现了选项卡:
<template>
<div>
<div class="row" >
<button class="btn btn-primary" style="margin-bottom:20px" @click="changeSelectedComp">Back</button>
<button class="btn btn-primary" style="margin-left:1000px" @click="EditMode">Edit</button>
</div>
<vue-tabs>
<v-tab title="Basic">
<app-players></app-players>
</v-tab>
<v-tab v-if="(!basicGroup || !basicSportGroup)" title="History">
<app-histories></app-histories>
</v-tab>
<v-tab v-if="!basicGroup" title="Timetable">
<app-timetables></app-timetables>
</v-tab>
<v-tab v-if="!basicGroup" title="Scholarship">
<app-scholarship></app-scholarship>
</v-tab>
</vue-tabs>
</div>
</template>
在这种情况下,即使用户在BasicSport
组中, History
选项卡仍会显示:
但是如果我写
<v-tab v-if="!basicSportGroup" title="History">
该选项卡不显示:
我不明白为什么第二个有效,但第一个无效,因为 OR 不是独占的。 如果用户在BasicSport
或在Basic
组中,如何隐藏History
选项卡?
这是完整的组件
如果“用户在名为BasicSport
的组中,或者如果他在名为Basic
的组中”,您想隐藏它 (1)
因此,如果用户BasicSport
在Basic
您想显示它。 (2)
你的逻辑应该是:
(1)
<v-tab v-if="!(basicGroup || basicSportGroup)" title="History">
<app-histories></app-histories>
</v-tab>
或者
(2)
<v-tab v-if="!basicGroup && !basicSportGroup" title="History">
<app-histories></app-histories>
</v-tab>
您必须使用&&
运算符而不是||
操作符,因为您只想在BasicSport
和不在Basic
。
<v-tab v-if="!basicGroup && !basicSportGroup" title="History">
<app-histories></app-histories>
</v-tab>
或者你也可以试试!(basicGroup || basicSportGroup)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.