v-if条件渲染及v-show的选择

文章目录

v-if条件渲染

v-if条件渲染,即在template中使用if-else逻辑表达式选择是否渲染某一变量。

v-if 、v-else 两者结合使用实现二选一,代码如下:

复制代码
<template>
	<view>
		<view  v-if="shop">京东</view>
		<view v-else>淘宝</view>
	</view>
</template>

<script setup>
	import {ref} from "vue" ;
	const shop = true
</script>

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

在这段代码中,shop变量为真,因此显示"京东",否则显示"淘宝"。

v-if、v-else搭配v-else-if实现多选一,代码如下:

复制代码
<template>
	<view>
		<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-else >错误</view>
	</view>
</template>

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

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

根据day变量的值,会渲染出不同的v-else-if内容,若day没有对应的值,则渲染条件else报错。

v-if条件渲染和v-show的选择

两者条件为假时,实际显示效果其实是一样的,但内部运行方式不同。

v-if为假,该元素就不会被渲染,也就是说不会占用资源;v-show为假,元素依然会被渲染,只是它是以display属性加载的,依然会占用资源。另外,v-show 不支持在 template元素上使用,也不能和 v-else 搭配使用。

template元素

v-if必须依附于某个元素使用,但如果我们想让它作用于多个元素呢?可以用template给它打包起来,这是一种包装器元素,在最终的渲染结果中并不会显示template。

相关推荐
alphageek84 分钟前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
小桥风满袖36 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心36 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~40 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒1 小时前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript