【Uni-App社区小程序】014-条件渲染

訾博ZiBo

发布于 2025-01-06 15:34:29

8600

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

0、警醒自己

1、学习不用心，骗人又骗己；

2、学习不刻苦，纸上画老虎；

3、学习不惜时，终得人耻笑；

4、学习不复习，不如不学习；

5、学习不休息，毁眼伤身体；

7、狗才等着别人喂，狼都是自己寻找食物；

一、条件渲染概述

条件渲染，顾名思义就是满足条件的时候进行渲染；

二、v-if

1、概述

v-if是一个条件判断，当条件为true的时候就会渲染当前标签，也就是条件渲染的的意思；

2、代码演示

<template>
	<view>
		v-if是一个条件判断，当条件为true的时候就会渲染当前标签，也就是条件渲染的的意思！
		<view class="box" v-if="isShow">
			圆
		</view>
		<button @click="changeShow()">显示/隐藏</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow : true,
			}
		},
		methods: {
			changeShow:function(){
				this.isShow = !this.isShow;
			}
		},
	}
</script>

<style>
	.box{
		background: #007AFF;
		color: #FFFFFF;
		height: 350upx;
		width: 350upx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50upx;
	}
	.c1{
		border: #FF3333 10upx solid;
	}
</style>

3、运行结果

（点击“显示/隐藏”控制圆形）

三、v-else

1、概述

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别；

2、代码演示

<template>
	<view>
		<!-- v-if是一个条件判断，当条件为true的时候就会渲染当前标签，也就是条件渲染的的意思！ -->
		<view class="box" v-if="isShow">
			v-if圆
		</view>
		<!-- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别！ -->
		<view class="box" v-else>
			v-else圆
		</view>
		<button @click="changeShow()">显示/隐藏</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow : true,
			}
		},
		methods: {
			changeShow:function(){
				this.isShow = !this.isShow;
			}
		},
	}
</script>

<style>
	.box{
		background: #007AFF;
		color: #FFFFFF;
		height: 350upx;
		width: 350upx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50upx;
	}
	.c1{
		border: #FF3333 10upx solid;
	}
</style>

3、运行结果

四、v-else-if

(逻辑含义非常简单，知道怎么写就行了！)

五、v-show

1、概述

如果v-if叫做【条件渲染】的话，v-show叫做【条件显示】；

2、代码演示

<template>
	<view>
		<!-- 如果v-if叫做【条件渲染】的话，v-show叫做【条件显示】； -->
		<view class="box" v-show="isShow">
			v-if圆
		</view>
		<button @click="changeShow()">显示/隐藏</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow : true,
			}
		},
		methods: {
			changeShow:function(){
				this.isShow = !this.isShow;
			}
		},
	}
</script>

<style>
	.box{
		background: #007AFF;
		color: #FFFFFF;
		height: 350upx;
		width: 350upx;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 50upx;
	}
	.c1{
		border: #FF3333 10upx solid;
	}
</style>