uni-app v-if条件渲染和v-show的选择对比

一，v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

代码示例：

<template>
	<view class="">
		<view v-if="shop">京东</view>
		<view v-else>淘宝网</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
	const shop=ref(true)
</script>
<style lang="scss" scoped>

</style>

也可以使用 v-else 为 v-if 添加一个“else 区块，如上为示例，返回true时为京东，返回false时为淘宝网。

注意： v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别 

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用

和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面

(v-else 和 v-else-if 也可以在 <template> 上使用)

代码示例：

<template>
	<view class="">
		<view v-if="num===1">星期1</view>
		<view v-else-if="num===2">星期2</view>
		<view v-else-if="num===3">星期3</view>
		<view v-else-if="num===4">星期4</view>
		<view v-else-if="num===5">星期5</view>
		<view v-else-if="num===6">星期6</view>
		<view v-else>格式错误</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const num=ref(3)
</script>

<style lang="scss" scoped>

</style>

 二，v-show

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

css行内样式来隐藏<uni-view style="display: none;">123</uni-vie
代码示例：

<template>
	<view class="">
		<view class="box1" v-if="false">
			<image src="../../static/2.jpg" mode=""></image>
		</view>
		<view class="box1" v-show="true" >
			<image src="../../static/3.jpg" mode=""></image>
		</view>
	</view>
</template>
<script setup>

</script>
<style lang="scss" scoped>

</style>