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>

相关推荐
knight_20248 分钟前
嵌入式学习日志————对射式红外传感器计次
stm32·单片机·嵌入式硬件·学习
go546315846533 分钟前
基于分组规则的Excel数据分组优化系统设计与实现
人工智能·学习·生成对抗网络·数学建模·语音识别
##echo34 分钟前
嵌入式Linux裸机开发笔记9(IMX6ULL)GPIO 中断实验(1)
linux·c语言·笔记·单片机·嵌入式硬件
●VON1 小时前
重生之我在暑假学习微服务第二天《MybatisPlus-下篇》
java·学习·微服务·架构·mybatis-plus
Yu_Lijing1 小时前
MySQL进阶学习与初阶复习第四天
数据库·学习·mysql
好学且牛逼的马2 小时前
学习随笔录
学习
我爱学嵌入式3 小时前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
im_AMBER7 小时前
学习日志19 python
python·学习
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen11 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习