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

vue.js中的渲染【条件渲染】

news 来源：原创 2025/7/4 12:56:37

条件渲染

在 Vue 中，条件渲染用于根据表达式的值来决定是否在 DOM 中渲染某个元素。Vue 提供了几种方式来实现条件渲染：

v-if 指令

用于根据条件是否为真来销毁或创建元素。

<p v-if="isVisible">显示这段内容</p>data() {return {isVisible: true}
}

结合 v-else-if 和 v-else

<p v-if="type === 'A'">A 类型</p>
<p v-else-if="type === 'B'">B 类型</p>
<p v-else>其他类型</p>

v-show 指令

v-show 也是用来条件渲染的，但它不会移除 DOM 元素，只是通过 display: none 来控制显示。

<p v-show="isVisible">这个内容始终存在于 DOM 中

要深入理解 Vue 的条件渲染，我们可以从以下几个方面逐层分析：指令机制、渲染行为、生命周期、性能考量，以及源码底层逻辑（简要）。

v-if 的本质 —— 控制元素的创建和销毁

v-if 是 Vue 提供的结构性指令，表示：只有当条件为真时，相关的元素/组件才会被插入到 DOM 中；条件为假时，会完全销毁对应的元素/组件。

示例：

<template><div><child-component v-if="showChild" /><button @click="showChild = !showChild">切换</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {components: { ChildComponent },data() {return {showChild: true}}
}
</script>

当 showChild 为 false，Vue 会销毁子组件实例（触发 beforeUnmount → unmounted 生命周期钩子）；为 true 时，再重新创建组件实例。

v-show 的本质 —— 控制元素的CSS 显隐

v-show 仅仅是将 display: none 应用于元素，它的元素在初始化时就已经渲染，并始终存在于 DOM 中，只是控制样式隐藏。

本质代码：

el.style.display = value ? '' : 'none'

不会触发组件的卸载，也不走生命周期钩子。

性能对比分析

项目	v-if	v-show
初次渲染性能	慢（需要判断 + 渲染/销毁 DOM）	快（一次性渲染，无条件判断）
	切换时性能	慢（频繁销毁/创建）
DOM 占用	少（不渲染不占 DOM）	多（永远在 DOM）
生命周期触发	是（组件可反复进入离开生命周期）	否（只初始化一次）

实际建议：

使用 v-if：页面中条件变化不频繁，或者初次不需要显示的内容，例如模态框、登录状态变化。
使用 v-show：内容显示频繁切换，比如选项卡组件、频繁展示/隐藏的 UI。

template + v-if 的高级用法

template 本身不会被渲染到 DOM，但你可以使用它包裹多个子元素一起受 v-if 控制。

<template v-if="user"><p>用户名：{{ user.name }}</p><p>邮箱：{{ user.email }}</p>
</template>

避免了多元素 v-if 的语法错误（Vue 只能对一个元素使用指令）。

渲染流程和源码底层（简要）

Vue 会在模板编译阶段将 v-if、v-else-if、v-else 处理为一个「条件表达式链」。
在运行时，会为 v-if 创建一个 Fragment Block，并根据布尔条件判断是否创建子组件或 DOM 节点。
对于组件，v-if 会动态地创建/销毁组件实例。
v-show 直接在指令解析器中操作 DOM 样式，不影响虚拟 DOM diff 逻辑。

注意事项和陷阱

不要同时使用 v-if 和 v-for 在同一元素上：

Vue 会优先处理 v-for，可能导致难以预期的行为。
解决方案：用 template v-for 外包一层，再在内部用 v-if。

<template v-for="item in list"><div v-if="item.visible">{{ item.name }}</div>
</template>

组件的缓存：使用保留状态

v-if 销毁组件会清空所有状态
配合可以缓存被移除的组件：

<keep-alive><my-tab v-if="showTab" />
</keep-alive>

vue.js中的渲染【条件渲染】

条件渲染在 Vue 中，条件渲染用于根据表达式的值来决定是否在 DOM 中渲染某个元素。Vue 提供了几种方式来实现条件渲染： v-if 指令用于根据条件是否为真来销毁或创建元素。 <p v-if"isVisible">显示这段内容</p>data() {retu…...

编程日记 2025/7/4 12:56:37

Qwen3如何强化推理能力？

大模型的推理能力一直是衡量其智能水平的关键指标。近期，Qwen3系列模型在这方面取得了显著突破。通过对Qwen3技术报告的解读，我们可以窥见一套完整的推理能力提升体系。本文将以结构化视角，剖析Qwen3推理能力提升的关键环节。报告地址&#…...

编程日记 2025/6/28 23:01:04

2025年中国主流DevOps平台对比分析：Gitee、阿里云效与GitLab CE的技术适配与合规实践全景解读

在2025年中国企业数字化转型持续深化的背景下，DevOps 工具的选型呈现出多元化趋势。以下从安全合规、技术生态适配性、实践案例和选型建议四个维度，对 Gitee、阿里云效（云效 DevOps）和 GitLab CE（中国版）三…...

编程日记 2025/6/28 23:00:23

从lightrag的prompt到基于openai Structured Outputs 的优化实现思路

LightRAG 是一个用于构建 RAG 系统核心组件的配置和管理类。它集成了文档处理、存储、向量化、图谱构建和 LLM 交互等功能。你可以通过配置 LightRAG 实例的各种参数来定制 RAG 系统的行为。目前lightrag中的实体关系抽取实现如下 PROMPTS["entity_extraction"] …...

编程日记 2025/6/28 22:59:23

论文阅读笔记——双流网络

双流网络论文视频相比图像包含更多信息：运动信息、时序信息、背景信息等等。原先处理视频的方法： CNN LSTM：CNN 抽取关键特征，LSTM 做时序逻辑；抽取视频中关键 K 帧输入 CNN 得到图片特征，再输入 LSTM&…...

编程日记 2025/6/28 23:01:13

Android清单文件

清单文件AndroidManifest.xml AndroidManifest.xml 配置清单文件是每个 Android 应用的配置中心，系统在安装和运行应用时，首先会读取它。它是 Android 应用的 “说明书”，主要作用是： 功能说明声明应用组件比如 Activity、Se…...

编程日记 2025/6/29 0:46:06

Single image dehazing论文阅读

Single image dehazing 1. 论文的研究目标与实际意义1.1 研究目标1.2 实际问题与产业意义2. 论文的创新方法、模型与公式2.1 改进的大气散射模型2.2 局部统计不相关性约束2.2.1 传输函数估计2.2.2 大气光颜色估计2.3 算法流程2.4 与传统方法的对比优势3. 实验设计与结果3.1 实验…...

编程日记 2025/6/28 22:59:28

数字信号处理-大实验1.3

MATLAB仿真实验目录验证实验：常见离散信号产生和实现验证实验：离散系统的时域分析应用实验：语音信号的基音周期（频率）测定说明：（1）本文是DSP大实验1的最后一篇，主要讲…...

编程日记 2025/6/28 23:42:34

【Pandas】pandas DataFrame describe

Pandas2.2 DataFrame Computations descriptive stats 方法描述DataFrame.abs()用于返回 DataFrame 中每个元素的绝对值DataFrame.all([axis, bool_only, skipna])用于判断 DataFrame 中是否所有元素在指定轴上都为 TrueDataFrame.any(*[, axis, bool_only, skipna])用于判断…...

编程日记 2025/6/28 23:02:34

C++GO语言微服务之Dockerfile docker-compose②

目录 01 12-yaml文件书写规则01 12-yaml文件书写规则 02 13-yaml中的数据类型 03 14-docker-compose配置文件格式 04 15-docker-compose中的关键字 05 16-prots和volumes关键字的使用 06 17-volumes_from的使用 07 18-extends的使用 08 19-networks的使用 09 20-docker…...

编程日记 2025/6/28 23:01:01

【计算机视觉】OpenCV实战项目：Face-Mask-Detection 项目深度解析：基于深度学习的口罩检测系统

Face-Mask-Detection 项目深度解析：基于深度学习的口罩检测系统一、项目概述项目特点二、项目运行方式与执行步骤（一）环境准备（二）项目结构（三）执行步骤三、重要逻辑代码解析（一&…...

编程日记 2025/6/28 23:00:30

鸿蒙OSUniApp 实现的语音输入与语音识别功能#三方框架 #Uniapp

UniApp 实现的语音输入与语音识别功能最近在开发跨平台应用时，客户要求添加语音输入功能以提升用户体验。经过一番调研和实践，我成功在UniApp项目中实现了语音输入与识别功能，现将过程和方法分享出来，希望对有类似需求的开发者有…...

编程日记 2025/6/28 22:59:24

python：一个代理流量监控的媒体文件下载脚本

前言一个mitmproxy代理服务应用，作用是监听系统流量，并自动下载可能的video媒体文件到本地。如果你没有安装mitmproxy或没有做完准备工作，请参考我的这篇文章： python：mitmproxy代理服务搭建-CSDN博客文件架构目录…...

编程日记 2025/6/28 23:00:47

openfeign与dubbo调用下载excel实践

一、前言 openfeign和dubbo均是rpc框架 RPC（Remote Procedure Call，远程过程调用）框架是一种允许程序像调用本地方法一样调用远程服务器上函数的技术。它隐藏了底层网络通信的复杂性，让开发者可以专注于业务逻辑，实现…...

编程日记 2025/6/28 22:59:26

Android多媒体——媒体start流程分析（十三）

当多媒体的数据源准备好，并且完成调用准备结束流程后，接下来就开始是调用 start() 方法开始播放媒体了。这里我们就来分析一下媒体开始播放的整个流程。一、媒体播放流程对于媒体播放流程的 Java 层和 JNI 层与前面的示例基本相同，这里不再重复展示了，我们直接从 mediap…...

编程日记 2025/6/29 1:10:48

数据库系统概论（八）SQL单表查询语言超详细讲解（附带例题表格对比带你一步步掌握）

数据库系统概论（八）SQL单表查询语言超详细讲解（附带例题表格对比带你一步步掌握） 前言一、创建表（了解一下就好，后面会详细讲）二、数据查询的概念2.1 什么是数据查询？2.2 数据查询的…...

编程日记 2025/6/29 0:45:23

【IPMV】图像处理与机器视觉：Lec11 Keypoint Features and Corners

【IPMV】图像处理与机器视觉：Lec11 Keypoint Features and Corners 本系列为2025年同济大学自动化专业**图像处理与机器视觉**课程笔记 Lecturer: Rui Fan、Yanchao Dong Lec0 Course Description Lec3 Perspective Transformation Lec7 Image Filtering Lec8 I…...

编程日记 2025/6/28 22:59:31

C++23 中的 ranges::starts_with 与 ranges::ends_with

文章目录功能介绍ranges::starts_withranges::ends_with 示例代码编译器支持总结 C23 标准引入了 ranges::starts_with 和 ranges::ends_with，这两个算法由提案 P1659R3 提出，旨在为任意范围提供检查前缀和后缀的功能。功能介绍 ranges::starts_wit…...

编程日记 2025/6/29 0:56:54

2025 uniapp的请求封装工具类以及使用【拿来就用】

一、创建一个http请求封装的js文件，名字自定义：my_http.js /*** 基础API请求地址（常量，全大写命名规范）* type {string}* constant*/ let BASE_URL //通过环境来判断基础路径 if (process.env.NODE_ENV development…...

编程日记 2025/6/28 23:00:25

Axure设计之内联框架切换页面、子页面间跳转问题

在Axure中，你可以通过以下步骤实现主页面中的内联框架在点击按钮时切换页面内容，从A页面切换到B页面。（误区：子页面之间切换不要设置“框架中打开链接”然后选“父级框架”这个交互） 主框架页面（左侧导航展…...

编程日记 2025/6/28 22:59:29

PyTorch 中神经网络相关要点（损失函数，学习率）及优化方法总结

笔记 1 神经网络搭建和参数计算 1.1 构建神经网络模型 import torch import torch.nn as nn # 线性模型和初始化方法 # todo:1-创建类继承 nn.module类 class ModelDemo(nn.Module):# todo:2-定义__init__构造方法, 构建神经网络def __init__(self):# todo:2-1 调用父…...

编程日记 2025/6/29 0:00:04

适用于 iOS 的开源Ultralytics YOLO：应用程序和 Swift 软件包，用于在您自己的 iOS 应用程序中运行 YOLO

一、软件介绍文末提供程序和源码下载该项目利用 Ultralytics 最先进的 YOLO11 模型将您的 iOS 设备转变为用于对象检测的强大实时推理工具。直接从 App Store 下载该应用程序，或浏览我们的指南，将 YOLO 功能集成到您自己的 Swift 应用程序中。二、…...

编程日记 2025/6/28 22:59:30

why FPGA喜欢FMC子卡？

FMC 即 FPGA Mezzanine Card （ FPGA中间层板卡），由子板模块、载卡两构成。 FMC 载卡：为子板模块提供插槽，使用母座FMC连接器。载卡连接器引脚与具有可配置IO资源的芯片例如FPGA引脚通过PCB设计连接在一起。。盘古100…...

编程日记 2025/6/29 0:07:51

【优选算法 | 字符串】字符串模拟题精选：思维+实现解析

算法相关知识点可以通过点击以下链接进行学习一起加油！双指针滑动窗口二分查找前缀和位运算模拟链表哈希表在众多字符串算法题中，有一类题目看起来没有太多算法技巧，却经常让人“翻车”——那就是字符串模拟题。这类题型往往不依赖复杂的数据…...

编程日记 2025/6/28 22:59:41

比亚迪固态电池突破：王传福的技术哲学与产业重构|创客匠人热点评述

合肥某车间凌晨两点依然灯火通明，工程师正在调试的银白色设备，即将颠覆整个电动车行业 —— 比亚迪全固态电池产线的曝光，标志着中国新能源汽车产业正式迈入 “技术定义市场” 的新纪元。一、技术突破的底层逻辑比亚迪全固态电池的核心竞…...

编程日记 2025/6/29 1:15:02

UUG杭州站 | 团结引擎1.5.0 OpenHarmony新Feature介绍

PPT下载地址：https://u3d.sharepoint.cn/:b:/s/UnityChinaResources/EaZmiWfAAdFFmuyd6c-7_3ABhvZoaM69g4Uo2RrSzT3tZQ?e2h7RaL 在2025年4月12日的Unity User Group杭州站中，Unity中国OpenHarmony技术负责人刘伟贤带来演讲《团结引擎1.5.0 OpenHarmony新…...

编程日记 2025/6/29 0:08:09

OpenHarmony轻量系统--BearPi-Nano开发板网络程序测试

本文介绍RISC-V架构海思Hi3861开发板，通过Linux开发环境运行OpenHarmony轻量化系统，下载测试网络例程的过程与步骤。 OpenHarmony操作系统分类轻量系统（mini system） 面向MCU类处理器例如Arm Cortex-M、RISC-V 32位的设备&#x…...

编程日记 2025/6/28 22:59:33

k8s 中使用 Service 访问时NetworkPolicy不生效问题排查

背景针对一个服务如下NetworkPolicy, 表示只有n9e命名空间的POD才能访问 k8s-man 服务 kind: NetworkPolicy apiVersion: networking.k8s.io/v1 metadata:name: k8s-mannamespace: n9elabels:app: k8s-manversion: v1 spec:podSelector:matchLabels:app: k8s-manversion: v1…...

编程日记 2025/6/29 1:25:55

2025 AI如何重构网络安全产品

威胁检测与防御利用机器学习算法提升威胁检测能力 ：AI能够分析大量的网络数据和行为模式，通过机器学习算法自动识别出潜在的威胁和异常行为。例如，Darktrace的Cyber AI Analyst基于真实SOC数据训练，可推进威胁调查，提…...

编程日记 2025/6/28 22:59:25

ARM杂谈——临界段保护恢复的中断状态可靠吗

0 前言在MCU中，临界段保护是指在多任务或多线程环境中，确保某段代码在执行时不会被其他任务或中断打断，从而避免数据竞争或不一致的问题。临界段保护通常用于共享资源的访问，如全局变量、硬件寄存器等。我们有一些常用的临界段…...

编程日记 2025/6/28 22:59:54

数据库MySQL学习——day10()

文章目录 1. 什么是子查询（Subquery）？2. 创建样例表：商品表 products3. 插入示例数据4. 子查询的三种常用位置4.1 子查询在 WHERE 子句中（最常见）4.2 子查询在 FROM 子句中（可以当成临时表&…...

编程日记 2025/6/28 23:00:28

YashanDB V23.4 LTS 正式发布｜两地三中心、库级闪回重磅特性上线，生产级可用性再升级

近日，YashanDB V23.4 LTS（Long-Term Support Release）版本正式发布，新版本深度契合关键行业数字化转型对数据库“业务永续、风险可控”的核心诉求，打造两地三中心秒级容灾、库级闪回秒级恢复、MySQL全面兼容等重磅特性…...

编程日记 2025/6/29 0:07:00

AI规则引擎：解锁SQL数据分析新姿势

一、AI 规则引擎与 SQL 的奇妙邂逅在当今数字化时代，数据如同石油，是企业发展和创新的核心驱动力。而如何从海量的数据中提取有价值的信息，成为了企业面临的关键挑战。人工智能规则引擎和 SQL，作为数据分析领域的两大重要工具&a…...

编程日记 2025/6/28 23:36:48

Kotlin Multiplatform与Flutter、Compose共存：构建高效跨平台应用的完整指南

简介在移动开发领域，跨平台技术正在重塑开发范式。Kotlin Multiplatform (KMP) 作为 JetBrains 推出的多平台开发框架，结合了 Kotlin 的简洁性与原生性能优势，使开发者能够高效共享业务逻辑。而 Flutter 凭借其高性能渲染引擎（Skia）和丰富的组件库，成为混合开发的首选方…...

编程日记 2025/6/28 22:59:43

FunASR：语音识别与合成一体化，企业级开发实战详解

简介 FunASR是由阿里巴巴达摩院开源的高性能语音识别工具包，它不仅提供语音识别(ASR)功能，还集成了语音端点检测(VAD)、标点恢复、说话人分离等工业级模块，形成了完整的语音处理解决方案。 FunASR支持离线和实时两种模式，能够高效处理多语言音频，并提供高精度的识别结果。…...

编程日记 2025/6/29 1:21:09

【Spark分析HBase数据】Spark读取并分析HBase数据

Spark读取并分析HBase数据一、摘要二、实现过程三、小结一、摘要 Apache Spark 是一个快速、通用的大数据处理引擎，提供了丰富的 API 用于数据处理和分析。HBase 是一个分布式、可扩展的 NoSQL 数据库，适合存储海量结构化和半结构化数据。Spark 与 HB…...

编程日记 2025/6/28 23:01:28

探索直播美颜SDK的核心算法：图像增强与AI美颜技术详解

一款优秀的直播美颜SDK不仅能让主播拥有完美的在线形象，还能帮助平台吸引更多用户。然而，这背后的关键在于其核心算法——从基本的图像增强到前沿的AI美颜技术，每一步都至关重要。今天，我们就来深入探讨这些技术背后的秘密。一、…...

编程日记 2025/6/28 22:59:22

全新linux网络配置工具nmcli:

1.Linux全新网络管理工具nmcli的使用 ,网络管理命令行工具nmcli 在nmcli中有2个命令最为常用： （1）nmcli connection 表示连接，可理解为配置文件，相当于ifcfg-ethX。可以简写为nmcli c （2）nmcl…...

编程日记 2025/6/29 0:01:14

LeetCode100.5 盛最多水的容器

对于这题，首先明确的是：盛水的体积取决于两垂线间的距离与两垂线中最短的长度。那么使用双指针，在每次移动时，只移动其中最短的那个，因为若移动最长的那个，体积不会变大。 class Solution { public:int …...

编程日记 2025/6/28 23:00:32

AI开发者的算力革命：GpuGeek平台全景实战指南（大模型训练/推理/微调全解析）

目录背景一、AI工业化时代的算力困局与破局之道1.1 中小企业AI落地的三大障碍1.2 GpuGeek的破局创新1.3 核心价值二、GpuGeek技术全景剖析2.1 核心架构设计三、核心优势详解‌3.1 优势1：工业级显卡舰队‌‌‌3.2 优势2：开箱即用生态‌3.2.1 预置镜像库…...

编程日记 2025/6/29 1:07:34

Java元注解

Java 元注解（Meta-Annotations） 元注解是指用于注解其他注解的注解，Java 提供了5个内置的元注解： 1. Target 指定注解可以应用的目标元素类型。 Target(ElementType.TYPE) // 只能用于类、接口或枚举 public interface MyAnno…...

编程日记 2025/6/29 0:07:53

FPGA：Xilinx Kintex 7实现DDR3 SDRAM读写

在Xilinx Kintex 7系列FPGA上实现对DDR3 SDRAM的读写，主要依赖Xilinx提供的Memory Interface Generator (MIG) IP核，结合Vivado设计流程。以下是详细步骤和关键点： 1. 准备工作硬件需求： Kintex-7 FPGA（如XC7K325T&…...

编程日记 2025/6/29 0:47:48

深度剖析 GpuGeek 实例：GpuGeek/Qwen3-32B 模型 API 调用实践与性能测试洞察

深度剖析 GpuGeek 实例：GpuGeek/Qwen3-32B 模型 API 调用实践与性能测试洞察前言 GpuGeek专注于人工智能与高性能计算领域的云计算平台，致力于为开发者、科研机构及企业提供灵活、高效、低成本的GPU算力资源。平台通过整合全球分布式数据中心资源&#…...

编程日记 2025/6/29 8:46:33

散列表（1）

散列表概念键通过散列函数后转换为数组的下标，在对应的下标位置上存储相应的信息键------>散列函数-------->数组下标------->存储信息散列函数散列函数就是一个函数，能够将给定的key转换为特定散列值。hashValuehash（key&…...

编程日记 2025/6/29 0:36:17

E. 23 Kingdom【Codeforces Round 1024 (Div. 2)】

E. 23 Kingdom 思路： 这道题的核心在于如何构造一个数组b，使得每个数的最远两个出现位置之差总和最大。通过分析，我们发现要最大化总美丽值，应尽可能让每个数的首次出现尽可能靠左、末次出现尽可能靠右。这样每个数的距离贡献j-i…...

编程日记 2025/6/29 0:33:31

TTS-Web-Vue系列：Vue3实现侧边栏与顶部导航的双向联动

🔄 本文是TTS-Web-Vue系列的最新文章，重点介绍如何在Vue3项目中实现侧边栏与顶部导航栏的双向联动功能。通过Vue3的响应式系统和组件通信机制，我们构建了一套高效、流畅的导航联动方案，让用户在不同入口都能获得一致的导航体验。 …...

编程日记 2025/6/29 0:47:04

【C++】模板（初阶）

一、模板与泛型编程我们先来思考一下：如何实现一个通用的交换函数？ void Swap(int& left, int& right) {int temp left;left right;right temp; }void Swap(double& left, double& right) {double temp left;left right;right te…...

编程日记 2025/6/29 1:10:19

大模型微调实战：基于GpuGeek平台的低成本高效训练方案

文章目录引言一、GpuGeek平台使用入门1. 注册与账号设置2. 控制台功能概览3. 快速创建GPU实例3. 预置镜像与自定义环境二、GpuGeek平台核心优势解析1. 显卡资源充足：多卡并行加速训练2. 镜像超多：开箱即用的开发环境3. 计费灵活：按需付费降…...

编程日记 2025/6/29 1:15:29

黑马k8s（六）

1.Deployment（Pod控制器） Selector runnginx 标签选择：会找pod打的标签执行删除之后，pod也会删除，Terminating正在删除如果想要访问其中的一个pod借助：IP地址端口号访问假设在某一个瞬间，…...

编程日记 2025/6/29 0:49:10

WEB安全--Java安全--CC1利用链

一、梳理基本逻辑 WEB后端JVM通过readObject()的反序列化方式接收用户输入的数据用户编写恶意代码并将其序列化为原始数据流 WEB后端JVM接收到序列化后恶意的原始数据并进行反序列化当调用： ObjectInputStream.readObject() JVM 内部逻辑： → 反…...

编程日记 2025/6/28 22:59:32