vue3.0 v-if条件渲染与v-show的选择对比

条件渲染

v-if

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

<view v-if="true">京东</view>

v-else

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

<view v-if="true">京东</view>
<view v-else>淘宝网</view>

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

v-else-if

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

        <view v-if="day===1">星期1</view>
		<view v-else-if="day===2">星期2</view>
		<view v-else-if="day===3">星期3</view>
		<view v-else-if="day===4">星期4</view>
		<view v-else-if="day===5">星期5</view>
		<view v-else-if="day===6">星期6</view>
		<view v-else-if="day===7">周末</view>
		<view v-else>格式错误</view>

<template> 上的 v-if

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。

        <template v-if="true">
			<image src="../../static/logo.png" mode=""></image>
			<view>logo</view>
		</template>
		
		<template v-else>
			<image src="../../static/pic4.jpg" mode=""></image>
			<view>pic4</view>
		</template>
	</view>

v-show

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

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

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

<template>
	<view>
		<view v-if="shop">京东</view>
		<view v-else>淘宝网</view>
		<view v-if="day===1">星期1</view>
		<view v-else-if="day===2">星期2</view>
		<view v-else-if="day===3">星期3</view>
		<view v-else-if="day===4">星期4</view>
		<view v-else-if="day===5">星期5</view>
		<view v-else-if="day===6">星期6</view>
		<view v-else-if="day===7">周末</view>
		<view v-else>格式错误</view>
		
		<view class="box1" v-if="false">
			<image src="../../static/pic3.jpg" mode=""></image>
		</view>
		<view class="box2" v-show="false">
			<image src="../../static/pic2.jpg" mode=""></image>
		</view>
		
		<template v-if="true">
			<image src="../../static/logo.png" mode=""></image>
			<view>logo</view>
		</template>
		
		<template v-else>
			<image src="../../static/pic4.jpg" mode=""></image>
			<view>pic4</view>
		</template>
	</view>
	
</template>

<script setup>
	import {ref} from "vue";
	const shop = ref(false);
	const day = ref(3);
</script>

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