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

条件渲染 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.xdnf.cn/news/14966.html

相关文章:

  • Web开发安全 之 信息加密
  • Spring Boot 集成 Thymeleaf​​ 的快速实现示例,无法渲染页面问题解决
  • 基于Flask和机器学习开发的米其林餐厅数据可视化平台
  • Peek-Ubuntu上Gif录制工具-24.04LTS可装
  • ClickHouse 全生命周期性能优化
  • Java零基础笔记01(JKD及开发工具IDEA安装配置)
  • 数据库学习笔记(十七)--触发器的使用
  • Chat Model API
  • centos 7.6安装mysql8
  • MySQL GROUP_CONCAT函数实现列转行
  • Python实例题:基于 Python 的简单聊天机器人
  • 基于Java+SpringBoot的三国之家网站
  • HTML网页应用打包Android App 完整实践指南
  • IM即时通讯系统设计——TIO 作为技术框架
  • .NET9 实现斐波那契数列(FibonacciSequence)性能测试
  • leetcode918.环形子数组的最大和
  • LangChain4j 框架模仿豆包实现智能对话系统:架构与功能详解
  • 力扣网编程55题:跳跃游戏之逆向思维
  • 【Linux】常用基本指令
  • TinyWebserver学习(9)-HTTP
  • 【Halcon】WPF 自定义Halcon显示控件完整流程与 `OnApplyTemplate` 未触发的根本原因解析!
  • C语言socket编程-补充
  • 面试150 快乐数
  • uniapp启动图被拉伸问题
  • 你若寻,便寻得见 ✨
  • MQTT与HTTP在物联网中的比较:为什么MQTT是更好的选择
  • 大小不足5M,轻量级PDF阅读工具
  • vs code关闭函数形参提示
  • 贪吃蛇游戏设计
  • Linux 内存水位判断机制与实战调优 —— 从卡顿现象到 ftrace 定位全流程