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

Vue3之条件渲染

news 2026/2/10 7:21:33

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.何为条件渲染

2.示例解析

3.总结

相关文章：

Vue3之条件渲染

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

设计模式之工厂模式

80.链表-由来

元胞自动机

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

JAVA练习55- Fizz Buzz

LeetCode笔记：Biweekly Contest 98

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

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

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

Autosar OS IOC

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

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

【数据结构】——队列

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

说说Hibernate

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

Golang sync.Once 源码浅析

C++面向对象（上）

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

React Native 开发环境搭建（全平台详解）

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

AGain DB和倍数增益的关系

云原生安全实战：API网关Kong的鉴权与限流详解

深入理解Optional：处理空指针异常

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

Vue3 PC端 UI组件库我更推荐Naive UI

相关类相关的可视化图像总结