条件渲染 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的使用

html 复制代码
<!-- 用户权限控制 -->
<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的使用

html 复制代码
<!-- 频繁切换的对话框 -->
<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>
相关推荐
Cacciatore->8 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~9 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo11 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末29 分钟前
React——基础
前端·react.js·前端框架
aklry41 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos