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

v-if

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

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

html 复制代码
<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 元素后面。

html 复制代码
<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基本一样:

html 复制代码
<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可以控制元素在同一级别,减少渲染耗时。

html 复制代码
<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>

相关推荐
阿絮~2 分钟前
Apache RocketMQ进阶之路阅读笔记和疑问
笔记·apache·rocketmq
天水幼麟5 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟7 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
绿皮的猪猪侠8 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj8 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
大苏打seven9 小时前
Docker学习笔记:Docker网络
笔记·学习·docker
Green1Leaves11 小时前
pytorch学习-9.多分类问题
人工智能·pytorch·学习
慕y27411 小时前
Java学习第十五部分——MyBatis
java·学习·mybatis
碣石潇湘无限路12 小时前
【AI篇】当Transformer模型开始学习《孙子兵法》
人工智能·学习