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

判断条件

1.第一种

如果身份是管理员 , 那么全部显示

如果身份是员工 ,那么除了value等于1的全部都显示

html 复制代码
v-if="( user.state.level ==='admin') || ( user.state.level === 'staff' && item.value !== 1)"
html 复制代码
<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.根据数据判断

html 复制代码
v-if="item.isShow"
html 复制代码
<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>
javascript 复制代码
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
	}])

案例

html 复制代码
<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>
javascript 复制代码
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()
})
相关推荐
我真的是大笨蛋1 小时前
K8S-Pod(下)
java·笔记·云原生·容器·kubernetes
碳水加碳水2 小时前
Java代码审计实战:XML外部实体注入(XXE)深度解析
java·安全·web安全·代码审计
努力也学不会java3 小时前
【设计模式】 原型模式
java·设计模式·原型模式
方渐鸿3 小时前
【2024】k8s集群 图文详细 部署安装使用(两万字)
java·运维·容器·kubernetes·k8s·运维开发·持续部署
学亮编程手记3 小时前
K8S v1.33 版本主要新特性介绍
java·容器·kubernetes
li35744 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj4 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
Haven-4 小时前
Java-面试八股文-JVM篇
java·jvm·面试
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
我真的是大笨蛋4 小时前
JVM调优总结
java·jvm·数据库·redis·缓存·性能优化·系统架构