判断、v-if判断显示隐藏,功能区循环案例。

本文主要是介绍判断、v-if判断显示隐藏,功能区循环案例。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

判断条件

1.第一种
如果身份是管理员，那么全部显示
如果身份是员工，那么除了value等于1的全部都显示

v-if="( user.state.level ==='admin') || ( user.state.level === 'staff' && item.value !== 1)"

<view class="funcBox"><block v-for="(item,index) in funcList" :key="index"><view class="item" @click="toFunc(item)" v-if="( user.state.level ==='admin') || ( user.state.level === 'staff' && item.value !== 1)"><image :src="item.img" mode="scaleToFill"></image><view class="funcTxt">{{item.title}}</view></view></block>
</view>

2.根据数据判断

v-if="item.isShow"

<view class="funcBox"><block v-for="(item,index) in funcList" :key="index"><view class="item" @click="toFunc(item)" v-if="item.isShow"><image :src="item.img" mode="scaleToFill"></image><view class="funcTxt">{{item.title}}</view></view></block>
</view>

const funcList = ref([{value: 1,img: '/static/images/index1.png',title: '第一个',path: '',isShow: user.state.level === 'staff' ? false : true}, {value: 2,img: '/static/images/index2.png',title: '第二个',path: '/pages/index/device/list',isShow: true}, {value: 3,img: '/static/images/index3.png',title: '第三个',path: '',isShow: true}, {value: 4,img: '/static/images/index4.png',title: '第四个',path: '',isShow: user.state.level === 'staff' ? false : true}])

案例

<view class="funcBox"><block v-for="(item,index) in funcList" :key="index"><view class="item" @click="toFunc(item)"v-if="( user.state.level ==='admin') || ( user.state.level === 'staff' && item.nothing)"><image :src="item.img" mode="scaleToFill"></image><view class="funcTxt">{{item.title}}</view></view></block>
</view>

import {commonStore
} from '@/store/commonStore.js'
import {userStore
} from '@/store/userStore.js'
const common = commonStore()
const user = userStore()
onShow(() => {common.getUserInfo()
})const funcList = ref([{value: 1,img: '/static/images/index1.png',title: '第1',path: '/pages/index/siteManage/siteManage',nothing: false,
}, {value: 2,img: '/static/images/index2.png',title: '第2',path: '/pages/index/deviceManage/deviceList',nothing: true,
}, {value: 3,img: '/static/images/index3.png',title: '第3',path: '/pages/index/allRechargeRecord',nothing: true,
}, {value: 4,img: '/static/images/index4.png',title: '第4',path: '/pages/index/deviceManage/useRecord',nothing: true,
}, {value: 5,img: '/static/images/index5.png',title: '第5',path: '/pages/index/earnings/earnings',nothing: true,
}, {value: 6,img: '/static/images/index6.png',title: '第6',path: '/pages/index/storeManage/storeManage',nothing: false,
}, {value: 7,img: '/static/images/index7.png',title: '第7',path: '/pages/index/deviceManage/deviceActivation',nothing: false,
}, {value: 8,img: '/static/images/index8.png',title: '第8',path: '/pages/index/masterManage/masterManage',nothing: true,
}])
onShow(() => {common.getUserInfo()
})