前端框架vue3中的条件渲染(v-show,v-if,v-else-if,v-else)

devtools/2024/10/18 12:19:18/

目录

v-show:

需求:

v-if

区别与v-show:

v-if和v-show的选择:

v-else-if和v-else

联合使用:


v-show:

        部分代码如图

<body><div id="root"><div ><h1>n的值为{{n}}</h1></div></div>
</body>
<script>new Vue({el:"#root",data:{n:"嘿嘿"}});
</script>

页面:

需求:

现在要隐藏这行文字,有很多中方法,此时在这里只需要加一个属性:

<div v-show="false"><h1>n的值为{{n}}</h1></div>

说明:

1.v-show里面的值为false文字隐藏,true文字显示。

2.当然它属性不只可以为true或false也可以是表达式,但也会根据ture和false判断,例如:

 <div v-show="x===1"><h1>n的值为{{n}}</h1></div>

v-if

说明:在使用上,和v-show一样,两者有一定区别

区别与v-show:

使用v-show检查后台时,发现结构并没有被破坏和隐藏,只是在页面上显示时隐藏了

可以看到浏览器给他加了一个display:none的样式将其隐藏,

v-if则不同:

 

可以看到它直接隐藏了变成了注释。

v-if和v-show的选择:

1.如果你页面上切换频繁就用v-show,因为v-if不断在结构上增删对效率有很大的影响


v-else-if和v-else

这种类似于流程控制if(){}elseif{}else{}依次判断

联合使用:

例如:部分代码如下。
 

         <div v-if="n===1">显示文字1</div><!-- 上面成立下面不在进行 --><div v-else-if="n===2">显示文字2</div><div v-else-if ="n===3">显示文字3</div><!-- 最后一个不需要条件 --><div v-else>显示文字4</div>

当n值为1,2,3,时《显示文字4》被隐藏,

当n值为除以上三个其他值时,《显示文字4》出现,其他三个隐藏。


http://www.ppmy.cn/devtools/107871.html

相关文章

虚幻地形高度图生成及测试

虚幻地形高度图生成及测试 虚幻引擎地形系统将高度数据存储在高度图中&#xff0c;这是一个灰阶图像&#xff0c;使用黑白色值来存储地貌高程。在高度图中&#xff0c;纯黑色值表示最低点&#xff0c;纯白色值表示最高点。支持16位灰阶PNG、8位灰阶r8及16位灰阶r16格式。 本文…

行为型设计模式-解释器(interpreter)模式

设计模式汇总&#xff1a;查看 通俗示例 想象一下你正在编写一个简单的计算器程序&#xff0c;用户可以输入类似 “3 4” 或 “5 * 2” 这样的表达式&#xff0c;并且你的程序需要计算出结果。为了解析和计算这些表达式&#xff0c;你可以设计一个解释器&#xff0c;它能够理…

rancher搭建k8s及jenkins自动化部署

1、准备环境 角色IP用途k8s-rancher-master192.168.3.63master节点k8s-rancher-node01192.168.3.64node节点k8s-rancher-node02192.168.3.66node节点k8s-rancher-server192.168.2.33rancher-server节点注: 服务器名需要配置不同,相同服务器名不能加入node节点 在所有节点进行…

macos下的 sed命令安装与使用 gnu-sed

sed命令是我们在linu类系统中非常重要的一个命令, 但是在macos下面默认是没有sed命令的, 不过我们可以通过brew install gnu-sed ( 或者通过 sudo port install gsed )这个软件包来获得这个命令 GNU sed 命令安装 下面2种方式,选择一种安装即可 # brew安装 brew install gn…

记录 PyQt6 / PySide 6 自定义边框窗口的 Bug 及可能可行的解决方案:窗口抖动和添加 DWM 环绕阴影的大致原理

前言&#xff1a; 本篇文章将要讨论我在前不久发表的关于 PyQt6 / PySide6 自定义边框窗口代码及内容中的问题&#xff1a; &#xff08;终&#xff09;PyQt6 / PySide 6 Pywin32 自定义标题栏窗口 完全还原 Windows 原生窗口边框特效_pyside6 win32 无边框窗口-CSDN博客ht…

51单片机-定时器介绍

时间&#xff1a;2024.8.31 作者&#xff1a;Whappy 目的&#xff1a;手撕51 代码&#xff1a; 现象&#xff1a;

在Go中迅速使用RabbitMQ

文章目录 1 认识1.1 MQ分类1.2 安装1.3 基本流程 2 [Work模型](https://www.rabbitmq.com/tutorials/tutorial-two-go#preparation)3 交换机3.1 fanout3.2 direct3.3 [topic](https://www.rabbitmq.com/tutorials/tutorial-five-go) 4 Golang创建交换机/队列/Publish/Consume/B…

开源-基于J2EE分布式架构的会议管理系统,支持会议资源管理,预订会议,冲突检测,提醒与签到

自20世纪末至21世纪初&#xff0c;数字化和互联网技术的迅猛发展彻底改变了工作方式和商业模式。企业迅速采用电子邮件、即时通讯和在线会议等数字工具以提升沟通效率。 在信息爆炸的时代&#xff0c;工作中面临的信息量剧增&#xff0c;而企业对效率和生产力的要求也日益提高…