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

Vue3之条件渲染

news 2026/3/27 13:58:48

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

空洞骑士模组管理终极指南：Scarab如何让复杂模组安装变得简单快速

空洞骑士模组管理终极指南&#xff1a;Scarab如何让复杂模组安装变得简单快速 【免费下载链接】Scarab An installer for Hollow Knight mods written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/sc/Scarab 对于《空洞骑士》玩家来说&#xff0c;模组&…...

编程新知 2026/3/27 13:06:56

实践指南：如何使用Cisco DefenseClaw保护你的AI Agent安全

一、背景&#xff1a;AI Agent安全面临的新挑战 最近&#xff0c;开源AI代理框架OpenClaw遭遇了大规模供应链攻击&#xff0c;超过800个恶意技能被植入ClawHub技能市场。这个事件被命名为"ClawHavoc"&#xff0c;它暴露了AI Agent生态的安全漏洞。 作为开发者&#x…...

编程新知 2026/3/27 12:22:29

# 发散创新：用 Rust实现一个轻量级游戏日引擎的核心调度机制 在现代游戏开发中，**高效的任务调度与资源管理**是性能

发散创新&#xff1a;用 Rust 实现一个轻量级游戏日引擎的核心调度机制 在现代游戏开发中&#xff0c;高效的任务调度与资源管理是性能瓶颈的关键所在。尤其是在“游戏日”这类强调多线程并行处理、实时响应的场景下&#xff0c;传统基于 C 或 Python 的方案往往因内存安全问题…...

编程新知 2026/3/27 12:02:20

macOS Unlocker V3.0：在Windows和Linux上免费运行macOS虚拟机的终极解决方案 [特殊字符]

macOS Unlocker V3.0&#xff1a;在Windows和Linux上免费运行macOS虚拟机的终极解决方案 &#x1f680; 【免费下载链接】unlocker 项目地址: https://gitcode.com/gh_mirrors/unlo/unlocker macOS Unlocker V3.0是一款革命性的开源工具&#xff0c;让您能够在Windows或…...

编程新知 2026/3/27 11:54:16

实战：利用大模型预测 2026 年最热门的‘长尾提问’并提前进行 GEO 占位

各位编程领域的同仁、技术爱好者&#xff0c;大家好&#xff01;今天&#xff0c;我们齐聚一堂&#xff0c;探讨一个既前沿又极具实战价值的议题&#xff1a;如何利用大模型&#xff08;Large Language Models, LLMs&#xff09;的强大能力&#xff0c;预测2026年可能成为热点的…...

编程新知 2026/3/27 11:50:14

BURSTER 9235 (85437090) 应变片信号放大器

BURSTER 9235 (85437090) 应变片信号放大器品牌&#xff1a;BURSTER&#xff08;德国波司特&#xff0c;精密测量技术专家&#xff09;型号&#xff1a;9235内部订货号&#xff1a;85437090类型&#xff1a;直连式&#xff08;In-Line&#xff09;应变片传感器信号放大器一、核…...

编程新知 2026/3/27 10:51:50

Qwen1.5-0.5B-Chat电商应用：商品咨询机器人搭建教程

Qwen1.5-0.5B-Chat电商应用&#xff1a;商品咨询机器人搭建教程 1. 引言&#xff1a;为什么需要一个轻量级商品咨询机器人&#xff1f; 想象一下&#xff0c;你经营着一家网店&#xff0c;每天有成百上千的顾客涌入。他们的问题五花八门&#xff1a;“这件衣服有L码吗&#x…...

编程新知 2026/3/27 10:23:43

EmbeddingGemma-300m在Mathtype公式的语义理解中的应用

EmbeddingGemma-300m在Mathtype公式的语义理解中的应用 1. 引言 数学公式的语义理解一直是自然语言处理领域的挑战性任务。传统的文本嵌入模型在处理复杂的数学表达式时往往力不从心&#xff0c;无法准确捕捉公式背后的数学含义和逻辑关系。EmbeddingGemma-300m作为Google最新…...

编程新知 2026/3/27 9:47:09

FigmaCN：5分钟快速实现Figma中文界面的终极解决方案

FigmaCN&#xff1a;5分钟快速实现Figma中文界面的终极解决方案 【免费下载链接】figmaCN 中文 Figma 插件&#xff0c;设计师人工翻译校验 项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN 还在为Figma英文界面而烦恼吗&#xff1f;figmaCN是一款专为中文用户打造…...

编程新知 2026/3/27 9:35:04

OpenCV实战：用Python+SIFT+八点算法搞定双目视觉匹配（附完整代码）

OpenCV实战&#xff1a;PythonSIFT八点算法实现双目视觉精准匹配 在计算机视觉领域&#xff0c;立体匹配是一个经典而富有挑战性的问题。想象一下&#xff0c;当你用双眼观察世界时&#xff0c;大脑能自动计算出物体的距离——这正是双目视觉系统要模拟的过程。本文将带你用Pyt…...

编程新知 2026/3/27 8:14:30