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

条件渲染 v-show与v-if

v-show和v-if的区别

1、渲染的机制不同
v-show是通过控制css的display元素也决定元素是否要显示,而v-if则是完全销毁与重建该元素及其子元素,当v-if条件为true时则渲染该元素并将其留在dom中,当条件为false时则将其元素及其子元素从dom中移除。

2、渲染的开销不同
v-if时惰性的,如果初始条件为false则什么也不做,也不会触发组件的生命周期钩子;只有当首次条件为true时才会渲染条件块。v-show则是不关初始条件是什么元素对会被渲染,会触发组件的生命周期钩子,所以有更高的渲染开销。

3、切换的开销不同
v-show是通过控制css的display元素也决定元素是否要显示条件块内的dom元素和组件实例会被保留,而v-if则是完全销毁与重建条件块内的dom元素和组件实例。

4、支持的功能也有所不同
v-if支持v-else、v-if-else,并且可以在template元素上使用,v-show只可以用v-show并且可以在template上使用。

5、使用的场景
v-if可以使用在那些不需要频繁改变状态的情境下,如用户的权限,平台区分等,需要在template上使用条件渲染,包装多个元素时,v-show适用与那些需要频繁切换显示状态的场景下,比如对话框,提示信息等。

v-if的使用

<!-- 用户权限控制 -->
<admin v-if="user.isAdmin"></admin><!-- 多条件分支 -->
<div v-if="status === 'loading'">加载中...</div>
<div v-else-if="status === 'success'">加载成功</div>
<div v-else-if="status === 'error'">加载失败</div>
<div v-else>未知状态</div><!-- 包装多个元素 -->
<template v-if="showSection"><h2>标题</h2><p>段落1</p><p>段落2</p>
</template>

v-show的使用

<!-- 频繁切换的对话框 -->
<div v-show="isDialogVisible" class="dialog"><!-- 对话框内容 -->
</div><!-- 标签页内容 -->
<div v-show="activeTab === 'home'" class="tab-content">首页内容</div>
<div v-show="activeTab === 'profile'" class="tab-content">个人资料</div>
<div v-show="activeTab === 'settings'" class="tab-content">设置</div>

http://www.dtcms.com/a/268253.html

相关文章:

  • 《自然》发布机器人技术路线图
  • 铸造软件交付的“自动驾驶”系统——AI大模型如何引爆DevOps革命
  • 分布式压测
  • Linux驱动学习day18(I2C设备ap3216c驱动编写)
  • Mybatis----留言板
  • python实战项目81:ZeoDB多线程数据爬取程序(最新稳定好用)
  • Node中Unexpected end of form 错误
  • 【大模型入门】访问GPT_API实战案例
  • 从LLM和MCP的协同过程看如何做优化
  • webUI平替应用,安装简单,功能齐全
  • 基于Java+springboot 的车险理赔信息管理系统
  • 基于udev规则固定相机名称
  • 计算机网络:(七)网络层(上)网络层中重要的概念与网际协议 IP
  • 深度学习图像分类数据集—濒危动物识别分类
  • 如何将 Java 项目打包为可执行 JAR 文件
  • Git使用教程
  • 软考(软件设计师)进程管理—进程基本概念,信号量与PV操作
  • centos7.9安装ffmpeg6.1和NASM、Yasm、x264、x265、fdk-aac、lame、opus解码器
  • 1.8 提示词优化
  • Tuning Language Models by Proxy
  • HBuilder提示”未检测到联盟快应用开发者工具”的问题无法发布快应用的解决方案-优雅草卓伊凡
  • 【第七章】全球卫星导航定位技术
  • 缺陷追踪流程
  • Vue+Openlayers加载OSM、加载天地图
  • Modbus_TCP_V5 新功能
  • 【机器学习深度学习】模型微调时的4大基础评估指标(1)
  • [netty5: WebSocketServerHandshaker WebSocketServerHandshakerFactory]-源码分析
  • 机器学习绪论
  • LeetCode 100题(1)(10题)
  • 线性代数--AI数学基础复习