当前位置： 首页 > news >正文

Vue3之条件渲染

news 2025/9/16 3:03:30

1.何为条件渲染

条件渲染就是在指定的条件下，渲染出指定的UI。比如当我们显示主页的时候，应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中，这种UI元素的显示和隐藏可以通过两个关键字，v-if 和v-show来实现。但是虽然实现的功能一样，但他们两者有着一些细微的区别。总结起来这个区别就是：v-show控制UI元素隐藏时只是将UI的显示状态变成了不可见，实际上这个UI是存在的，但是v-if隐藏UI元素时则是直接干掉了这个UI元素，使其不显示，具体的区别，我们通过下面的示例分析。

2.示例解析

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello world</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="root"></div></body>
<script>const app =    Vue.createApp({data() {return {show: false,conditionOne:false,conditionTwo:true}},template: `<div v-if="conditionOne">if</div><div v-else-if="conditionTwo">else if</div><div v-else>else</div><div v-show = "show">hello,I'm show</div><div v-if="show"> hello,I'm if</div>`});const vm = app.mount('#root');
</script>
</html>

上面的示例中分别展示了几个内容，一是可以使用v-if 实现if…else if…else的条件控制语句，二是v-if和v-show的使用方法，三是v-if和v-show的区别。前两个都比较简单，我们不多做赘述。我们看下v-if和v-show的区别

html 部分代码

<div v-show = "show">hello,I'm show</div>
<div v-if="show"> hello,I'm if</div>

Vue.js 部分代码

        data(){return {show: false}}

我们使用show变量控制两个div显示和隐藏，运行结果如下：
在这里插入图片描述

运行后我们可以发现“hello,I’m show”和“hello,I’m if”的div都消失了，其中v-show的隐藏方式是直接给div加了一个css样式，style="display:none;" div还是被渲染出来了，只是没有显示，而v-if是直接把div给干掉了。

3.总结

使用条件渲染的时候v-show的方式隐藏dom元素时，会添加一个style="display:none;"样式来达到显示隐藏dom元素的效果，而v-if的方式是通过创建和销毁dom元素的方式来显示和隐藏dom元素，所以我们需要快速显示和隐藏dom元素时，我认为使用v-show更好，因为dom元素一直在，只需要修改CSS属性就可以快速显示和隐藏,而v-if的方式会创建和销毁dom元素，这种方式dom元素的创建和销毁需要耗时。如果是为了内存性能考虑，推荐使用v-if,毕竟dom元素一隐藏就会回收掉其占用的内存。

相关文章：

Vue3之条件渲染

1.何为条件渲染 条件渲染就是在指定的条件下&#xff0c;渲染出指定的UI。比如当我们显示主页的时候&#xff0c;应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中&#xff0c;这种UI元素的显示和隐藏可以通过两个关键字&#xff0c;v-if 和…...

编程日记 2023/2/20 1:34:00

将Nginx 核心知识点扒了个底朝天（四）

为什么 Nginx 不使用多线程&#xff1f; Apache: 创建多个进程或线程&#xff0c;而每个进程或线程都会为其分配 cpu 和内存&#xff08;线程要比进程小的多&#xff0c;所以 worker 支持比 perfork 高的并发&#xff09;&#xff0c;并发过大会榨干服务器资源。 Nginx: 采用…...

编程日记 2023/2/20 1:32:52

设计模式之工厂模式

文章の目录一、什么是工厂模式二、工厂模式有什么用&#xff1f;三、应用场景四、示例1、用字面量的方式创建对象2、使用工厂模式创建对象参考写在最后一、什么是工厂模式 工厂模式是一种众所周知的设计模式&#xff0c;广泛应用于软件工程领域&#xff0c;用于抽象创建特定对…...

编程日记 2023/2/20 1:31:40

80.链表-由来

链表是怎么发展来的 线性表&#xff1a;是n个具有相同特性的数据元素的有限序列。 链表&#xff1a;具有线性存储结构的线性表。 为什么需要使用链表&#xff1f;&#xff08;链表是如何被设计出来的&#xff09; 程序开发最重要的部分是如何在项目程序中找到一种合适的、好…...

编程日记 2023/2/20 1:30:33

元胞自动机

文章目录前言文献阅读摘要主要贡献方法框架实验结论元胞自动机元胞自动机是什么&#xff1f;构成及规则案例及代码实现总结前言 This week,the paper proposes a Multi-directional Temporal Convolutional Artificial Neural Network (MTCAN) model to impute and forecast P…...

编程日记 2023/2/20 1:29:25

设计模式之各种设计模式总结与对比

目录1 目标2 定位3 一句话归纳设计原则4 G0F 23种设计模式简介5 设计模式使用频次总结6 —句话归纳设计模式7 设计模式之间的关联关系和对比1 目标 1、 简要分析GoF 23种设计模式和设计原则,做整体认知。 2、 剖析Spirng的编程思想&#xff0c;启发思维,为之后深入学习Spring…...

编程日记 2023/2/20 1:28:17

JAVA练习55- Fizz Buzz

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、题目-Fizz Buzz 1.题目描述 2.思路与代码 2.1 思路 2.2 代码 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 2月19日练习…...

编程日记 2023/2/20 1:27:10

LeetCode笔记：Biweekly Contest 98

LeetCode笔记&#xff1a;Biweekly Contest 98 1. 题目一 1. 解题思路2. 代码实现 2. 题目二 1. 解题思路2. 代码实现 3. 题目三 1. 解题思路2. 代码实现 4. 题目四 比赛链接&#xff1a;https://leetcode.com/contest/biweekly-contest-98 1. 题目一 给出题目一的试题链接如…...

编程日记 2023/2/20 1:26:00

HNUCM-《算法分析与设计》期末考试考前复习题

问题 A: X星人的地盘题目描述一天&#xff0c;X星人和Y星人在一张矩形地图上玩抢地盘的游戏。X星人每抢到一块地&#xff0c;在地图对应的位置标记一个“X”&#xff1b;Y星人每抢到一块地&#xff0c;在地图对应的位置标记一个“Y”&#xff1b;如果某一块地无法确定其归属则标…...

编程日记 2023/2/20 1:24:53

算法导论【分治思想】—大数乘法、矩阵相乘、残缺棋盘

这里写自定义目录标题分治法概述特点大数相乘问题分治算法矩阵相乘分治算法残缺棋盘分治算法分治法概述 在分而治之的方法中&#xff0c;一个问题被划分为较小的问题&#xff0c;然后较小的问题被独立地解决&#xff0c;最后较小问题的解决方案被组合成一个大问题的解决。 通常…...

编程日记 2023/2/20 1:23:44

Java【七大排序】算法详细图解，一篇文章吃透

文章目录一、排序相关概念二、七大排序1&#xff0c;直接插入排序2&#xff0c;希尔排序3&#xff0c;选择排序4&#xff0c;堆排序5&#xff0c;冒泡排序5.1冒泡排序的优化6&#xff0c;快速排序6.1 快速排序的优化7&#xff0c;归并排序三、排序算法总体分析对比总结提示&…...

编程日记 2023/2/20 1:22:35

Autosar OS IOC

Inter-OS-Application Communicator 背景和基本原理General purposeIOC functionalityCommunicationNotificationIOC interface背景和基本原理 The IOC implementation shall be part of the Operating System IOC和操作系统紧密相关&#xff0c;是操作系统实现的一部分 The IO…...

编程日记 2023/2/20 1:21:26

记录一次Binder内存相关的问题导致APP被杀的BUG排查过程

事情的起因的QA压测过程发生进程号变更&#xff0c;怀疑APP被杀掉过&#xff0c;于是开始看日志 APP的压测平台会上报进程号变更时间点&#xff0c;发现是在临晨12&#xff1a;20分&#xff0c;先大概确定在哪个日志文件去找关键信息一开始怀疑是crash&#xff0c;然后就在日志…...

编程日记 2023/2/20 1:20:19

设计模式(十)----结构型模式之适配器模式

1、概述 如果去欧洲国家去旅游的话&#xff0c;他们的插座如下图最左边&#xff0c;是欧洲标准。而我们使用的插头如下图最右边的。因此我们的笔记本电脑&#xff0c;手机在当地不能直接充电。所以就需要一个插座转换器&#xff0c;转换器第1面插入当地的插座&#xff0c;第2面…...

编程日记 2023/2/20 1:19:13

【数据结构】——队列

文章目录前言一.什么是队列&#xff0c;队列的特点二、队列相关操作队列的相关操作声明队列的创建1.队列的初始化2.对队列进行销毁3.判断队列是否为空队列4.入队操作5.出队操作6.取出队头数据7. 取出队尾数据8.计算队伍的人数总结前言 本文章讲述的是数据结构的特殊线性表——…...

编程日记 2023/2/20 1:18:04

Android OTA升级常见问题的解决方法

1.1 多服务器编译 OTA 报错 Android7 以后引入了 jack-server 功能&#xff0c;也导致在公共服务器上 编译 Android7 以上的版本时&#xff0c;会出现 j ack-server 报错问题。 在多用户服务器上 编译 dist 时 会出现编译过程中 会将 port_service 和 port_admin 改为 默认的 …...

编程日记 2023/2/20 1:16:57

说说Hibernate

当你在实战项目中需要用到SSH时, 如果你之前只用过Mybatis那自然是不能解决问题的, 因为在很多银行类金融类项目中你可能会使用到Hibernate, 那么关于Hibernate你应该要了解什么呢, 本篇文章就以学习Hibernate框架为目的, 巩固在工作中可能需要用到的这种ORM技术, 同时也欢迎家…...

编程日记 2023/2/20 1:15:45

目标检测论文阅读：DETR算法笔记

标题&#xff1a;End-to-End Object Detection with Transformers 会议&#xff1a;ECCV2020 论文地址&#xff1a;https://link.springer.com/10.1007/978-3-030-58452-8_13 官方代码&#xff1a;https://github.com/facebookresearch/detr 作者单位&#xff1a;巴黎第九大学、…...

编程日记 2023/2/20 1:14:36

Golang sync.Once 源码浅析

本文分析了Golang sync.Once 源码&#xff0c;并由此引申&#xff0c;简单讨论了单例模式的实现、 atomic 包的作用和 Java volatile 的使用。 sync.Once 使用例子 sync.Once 用于保证一个函数只被调用一次。它可以用于实现单例模式。 有如下类型&#xff1a; type instanc…...

编程日记 2023/2/20 1:13:27

C++面向对象（上）

文章目录前言1.面向过程和面向对象初步认识2.引入类的概念1.概念与用法2.类的访问限定符及封装3.类的作用域和实例化4.类的大小计算5.this指针3.总结前言 本文将对C面向对象进行初步介绍&#xff0c;引入类和对象的概念。围绕类和对象介绍一些基础知识&#xff0c;为以后深入学…...

编程日记 2023/2/20 1:12:20

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/12 23:55:04

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/9/15 0:18:50

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/9/15 13:18:16

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/9/9 5:40:10

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/9/9 14:46:39

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/9/12 23:22:11

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/9/12 23:21:57

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/9/9 10:09:57

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/9/2 17:48:08