view class=wrap block v-for=itemindex in optionList key=index view class=wrap-item click=toOptionitem image src=itemimg mode=image view class=name itemname view view block
根据给出的代码和要求,可以通过判断用户角色来显示不同的选项。在代码中添加一个变量来表示用户角色,然后根据角色来渲染选项列表。
首先,在data中添加一个变量用来表示用户角色:
data() {
return {
role: 'boss', // 默认为老板角色
optionList: [
{
optionId: 1,
name: '店员管理',
img: '../../static/staff.png',
},
{
optionId: 2,
name: '店铺信息修改',
img: '../../static/shop.png',
}
],
}
},
然后,在模板中使用v-if指令来根据角色来判断是否显示选项:
<view class="wrap">
<block v-for="(item, index) in optionList" :key="index">
<view class="wrap-item" v-if="role === 'boss' || item.name !== '店员管理'" @click="toOption(item)">
<image :src="item.img" mode=""></image>
<view class="name">
{{item.name}}
</view>
</view>
</block>
</view>
这样,当角色为老板时,店员管理选项会被隐藏,当角色为店员时,店铺信息修改选项会被隐藏
原文地址: https://www.cveoy.top/t/topic/iyIt 著作权归作者所有。请勿转载和采集!