Javascript 如果语句为true,则在Vue.js中隐藏选项卡
我有一个Vue组件,其模板如下所示:Javascript 如果语句为true,则在Vue.js中隐藏选项卡,javascript,vue.js,if-statement,tabs,show-hide,Javascript,Vue.js,If Statement,Tabs,Show Hide,我有一个Vue组件,其模板如下所示: <template> <div> <div class="row" > <button class="btn btn-primary" style="margin-bottom:20px" @click="changeSelectedComp">Back</button> <button class="btn btn-primary" style="marg
<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 title="History">
<app-histories></app-histories>
</v-tab>
<v-tab title="Timetable">
<app-timetables></app-timetables>
</v-tab>
<v-tab title="Scholarship">
<app-scholarship></app-scholarship>
</v-tab>
</vue-tabs>
</div>
</template>
这是IsCurrentUserMemberOfGroup
函数:
function IsCurrentUserMemberOfGroup(groupName, OnComplete) {
var currentContext = new SP.ClientContext.get_current();
var currentWeb = currentContext.get_web();
var currentUser = currentContext.get_web().get_currentUser();
currentContext.load(currentUser);
var allGroups = currentWeb.get_siteGroups();
currentContext.load(allGroups);
var group = allGroups.getByName(groupName);
currentContext.load(group);
var groupUsers = group.get_users();
currentContext.load(groupUsers);
currentContext.executeQueryAsync(OnSuccess,OnFailure);
function OnSuccess(sender, args) {
var userInGroup = false;
var groupUserEnumerator = groupUsers.getEnumerator();
while (groupUserEnumerator.moveNext()) {
var groupUser = groupUserEnumerator.get_current();
if (groupUser.get_id() == currentUser.get_id()) {
userInGroup = true;
break;
}
}
OnComplete(userInGroup);
}
function OnFailure(sender, args) {
OnComplete(false);
}
}
我查看了v-if
(条件呈现),但还没有理解语法。
已尝试
,但无法使用
如果if语句为true,如何隐藏选项卡?
(以下是)将
isCurrentUserInGroup
放入数据中,以便您可以引用它:
export default {
components: {
...
},
methods: {
...
},
data: {
isCurrentUserInGroup: false
}
};
并在需要时设置为true或false。
然后您可以将其与选项卡中的v-if
一起使用:
<vue-tabs>
<v-tab title="Basic">
<app-players></app-players>
</v-tab>
<v-tab v-if="isCurrentUserInGroup" title="History">
<app-histories></app-histories>
</v-tab>
<v-tab v-if="isCurrentUserInGroup" title="Timetable">
<app-timetables></app-timetables>
</v-tab>
<v-tab v-if="isCurrentUserInGroup" title="Scholarship">
<app-scholarship></app-scholarship>
</v-tab>
</vue-tabs>
如果IsCurrentMemberofGroup为true,将进行渲染;如果IsCurrentMemberofGroup为true,则进行渲染使用谢谢,但我仍然不明白将此IsCurrentUserMemberOfGroup(“Admins”,函数(isCurrentUserInGroup){if(isCurrentUserInGroup){//隐藏选项卡}}}放在何处
您可以从created()
lifecyclehook调用该方法。
<vue-tabs>
<v-tab title="Basic">
<app-players></app-players>
</v-tab>
<v-tab v-if="isCurrentUserInGroup" title="History">
<app-histories></app-histories>
</v-tab>
<v-tab v-if="isCurrentUserInGroup" title="Timetable">
<app-timetables></app-timetables>
</v-tab>
<v-tab v-if="isCurrentUserInGroup" title="Scholarship">
<app-scholarship></app-scholarship>
</v-tab>
</vue-tabs>