uni-app学习笔记八-vue3条件渲染

v-if

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

可以使用 v-else 为 v-if 添加一个"else 区块"

<view v-if="shop">京东</view>
<view v-else>天猫</view>

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

v-else-if

v-else-if 提供的是相应于 v-if 的"else if 区块"。它可以连续多次重复使用，和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

<view v-if="day===1">星期一</view>
<view v-else-if="day===2">星期二</view>
<view v-else-if="day===3">星期三</view>
<view v-else-if="day===4">星期四</view>
<view v-else-if="day===5">星期五</view>
<view v-else-if="day===6">星期六</view>
<view v-else-if="day===7">星期天</view>
<view v-if="day===8">格式错误</view>

JS代码
<script setup>
	import {ref} from "vue"

	const day = ref(3)
</script>

v-show​

v-show也可以用来按条件显示一个元素。其用法和v-if基本一样：

<view v-show="false">
	<image src="/static/pic2.png"></image>
</view>

注意

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

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

v-if vs. v-show适用场景

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

<template> 上的 v-if

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。当我们要控制多个元素的显示与隐藏时，可以在外层添加一个template标签，并将v-if放在template标签里。template可以控制元素在同一级别，减少渲染耗时。

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

：