VueJs 学习笔记 - v-if & v-show

最新推荐文章于 2025-10-23 15:40:20 发布

转载最新推荐文章于 2025-10-23 15:40:20 发布 · 342 阅读

收录于

JavaScript

当前文章被收录于：

JavaScript

10 篇文章 1 人学习

订阅专栏查看详情

VueJs

当前文章被收录于：

VueJs

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文对比了Vue.js中v-if与v-show指令的区别。v-if通过DOM元素的增删实现显示与隐藏，适合较少变动的场景；而v-show则通过CSS属性控制，适用于频繁切换的情况。两者在性能消耗、编译条件等方面有所不同。

v-if vs v-show

相同点：v-if 和 v-show 都可以动态的操作 DOM 结构的显示与隐藏；

不同点：v-if 的显示、隐藏是操作 DOM 结构的添加和移除，v-show 的显示、隐藏是给 DOM 节点添加 display 属性 block / none；

编译过程：

v-if 切换有一个局部编译、卸载的过程，该过程中合适的销毁和重建内部的事件监听和子组件；

v-show 只是基于 CSS 的切换；

编译条件：

v-if 是惰性的，如果初始条件为 false，则不做编译渲染，只有在第一次为 true 时才开始局部编译（编译被缓存？，切换时进行局部卸载）；

v-show 是在任何条件下都会被编译，然后被缓存，而且 DOM 元素保留；

性能消耗：

v-if 有更高的切换消耗；

v-show 有更高的初始渲染消耗；

使用场景：

v-if 适用于运营条件不大可能改变的场景；

v-show 适用于频繁切换的场景；

标签

#v-show #v-if #vue

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

文一大大

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

阻止 Vue 组件渲染的方法

PixelLogic的博客

09-26

671

根据具体的需求，我们可以选择使用 v-if、v-show、动态组件或注释来实现不同的效果。根据项目的复杂程度和性能要求，选择合适的方法来控制组件的渲染是很重要的。不同的是，使用 v-show 时，组件始终会被渲染，只是通过 CSS 的。需要注意的是，这种方法不如前面的方法灵活，因为我们无法在运行时动态地控制组件的渲染。Vue 还允许我们通过注释的方式来阻止组件的渲染，这种方法适用于临时调试或测试的情况。元素，并根据条件动态绑定组件的名称，我们可以实现阻止组件渲染的效果。的值，我们选择要渲染的组件。

参与评论您还未登录，请先登录后发表或查看评论

在blender中安装vtk插件

最新发布

如果想成为中心，那么就到中心去吧。

10-23

256

Blender 是一个开源的、功能强大的3D计算机图形软件，广泛用于创建动画片、视觉效果、艺术作品、3D打印模型、互动3D应用程序和视频游戏。Blender 是由 Blender 基金会开发和维护的，具有丰富的功能和灵活的扩展性。在github上下载zip插件。

【Vue】条件渲染（v-if有缓存功能，v-show没有）

weixin_39415598的博客

01-05

2739

微信订阅号：Rabbit_svip Vue提供了v-if，v-else，v-show这几个指令来判断是否该输出指定的DOM元素。本节目录 v-if 的用法 v-if 和 v-else 的配合 v-show 的用法 v-if 和 v-show 的区别（包括缓存部分） v-if v-if 指令可以完全根据表达式的值在DOM中生成或移除一个...

1. linux系统下在QT中配置OPenCV开发环境

山间点烟雨

06-15

2882

在Linux系统下配置OpenCV的开发环境，需要在官网上下载源码，并使用CMake工具对源码进行编译，与在Windows系统中配置相比复杂许多，本文linux系统为linux minit，opencv是最新版本4.7.0，不过对于linux和opencv的版本要求行不高。此项更改为自己OPenCV想要安装的路径内，默认是安装在**/usr/local。在打开的文件中添加下图中的一行代码，路径是opencv默认的安装路径。按钮，弹出下图界面，默认选择即可，然后点击。

组件的切换与缓存

weixin_58384302的博客

11-11

2630

SPA页面是多组件拼起来的,这时候就存在组件之间的切换问题，Vue中也提出了动态组件的概念,使得我们可以更好的实现组件之间的切换效果 , 但是vue中组件的切换实际是组件本身重新创建和销毁的过程,在某些场景下我们并不希望组件被重新创建重新渲染这里我就主要介绍Vue中组件的切换以及缓存解决方法一、组件的切换方式 (1) 使用 v-if和v-else或者(v-show) <Com1 v-if="istrue" /> <Com2 v-else /> 当里面的istrue为true时

Vue切换页面保存缓存数据或文件的两种方式

pshdhx的博客

07-24

8909

功能描述：在一个大的父组件中，根据tab页面的v-if进行切面的切换，但是v-if的切换会造成组件的销毁，再切换回去输入的数据或者上传的文件就没有了，所以切换页面不能让tab页面的子组件销毁。解决：在子组件的外边包上一个<keep-alive></keep-alive>的标签；如果是路由的方式，那么就在<router-view>外边包上<keep-alive> 或者是在定义路由组件的时候在routes[]里边的元数据m...

如何优化Vue template中大量的v-if条件选择

高性价比服务器就选：蓝易云

05-30

681

v-if是“真正”的条件渲染，它会根据表达式是否为真值来进行渲染元素。总结一下：优化Vue模板中大量的v-if条件选择主要有四种方式：计算属性、组件动态切换、合理使用 v-show 和 v-if以及方法封装。然而，当我们在模板中使用大量的v-if条件选择时，可能会导致代码的可读性和性能下降。如果你有一些复杂的逻辑需要在多个地方使用到，并且这些逻辑都涉及到条件选择，那么可以考虑将它们封装成方法。这样，你可以在data或者computed属性中动态改变currentComponent的值，从而切换不同的组件。

VueJs学习笔记

MANX98的博客

06-01

384

VueJs学习笔记一、入门创建vue实例插值表达式(mytext="\Hello\")v-model (双向数据绑定)v-forv-on 简写 @事件="方法名"v-show="参数"v-if="参数"v-on:事件="方法" 简写 @事件="方法"消息事件阻止事件冒泡阻止默认事件键盘事件v-bin:属性="参数" 简写 :属性="参数"绑定普通属性绑定类绑定cssfilter 过滤器过滤器的使用自定义filter 一、入门创建vue实例 var app = new Vue({

Vue命令及案例学习总结

weixin_46379270的博客

07-19

1144

文章目录Vue框架【官网】：[Vue官网](https://cn.vuejs.org/v2/api/)【Vue语法】【修改属性值】【Vue常用指令】v-textv-htmlv-showv-ifv-else-ifv-elsev-forv-onv-modelv-bing【事件】@click="[方法名]";@mouseenter="[方法名]"【监听属性】watch【好玩的实例】百度预搜索九九乘法表10X10”我是最棒滴！“【Vue的生命周期】【组件】定义全局组件props$emit$bus【Vue实现Ajax

vue学习笔记（1）

李弈圣的博客

01-03

238

准备开始学员反馈下午感觉要起飞了,给我们点时间练一下保留最终解释权晕晕乎乎的一天就过去了保留最终解释权 1.后端代码的抽取感觉还可以，前端代码抽取懵，关于哪个需要依赖、注入，哪个不需要依赖、注入，不懂？输入服务是需要使用的时候配置期 config -&amp;amp;gt; 可以注入供应商服务对象，对于具体服务进行配置运行期非config都算是运行期 ...

Vue的使用

qq_57907966的博客

07-19

531

基于MVVM思想，实现数据的双向绑定，将编程的关注点放到数据上Vue快速入门1、新建HTML页面，引入Vue.js文件链接：https://pan.baidu.com/s/1VUxtuGOVUAtKRGQf1JGWAA 提取码：0630如果是在vscode中则需要在控制台下载vue找到list下的vue.js2.在JS代码区域，创建Vue核心对象，进行数据绑定 3.编写视图 Vue常用指令：指令作用 v-bind 为HTML标签绑定属性值，如设置href，css样式等 v-mod

2020大厂前端面试之vue专题（二）

qq_40665861的博客

05-09

1034

11.Vue中模板编译原理将 template 转化成 render 函数 function baseCompile( template: string, options: CompilerOptions ) { const ast = parse(template.trim(), options) // 1.将模板转化成ast语法树 if (options.optimize !== false) { // 2.优化树

vue-（1）认识vue

qq_41429551的博客

01-11

196

1、认识Vue Vue是一个渐进式框架 core+Vue-router+vuex 2、Vue.js安装方式一：直接CDN引入方式二：下载和引入开发环境：https://vuejs.org/js/vue.js 生产环境:https://vuejs.org/js/vue.min.js 方式三：npm 安装（推荐）后续可用webpack和cli的使用步骤，去Vue官网中找到开发版本，然后下载文件，引用； 3、体验 let:变量 const：常量 div#app 快捷键 //编程范式：声明式编程 &

Vue报错TypeError: Cannot read properties of null (reading ‘insertBefore‘)

weixin_42940307的博客

06-05

3019

从报错上看，看不到太多的信息与提示，因此对于第一次遇到这种报错的人，往往不知道从何下手去修复报错。自动渲染页面的数学公式。那么报错很可能就是因为你设置的自动渲染功能，其实就是因为你完全按照官网的方式设置导致的[doge]。，那么有可能把正常的代码也给渲染成数学公式了，结果就出现了。总结一下，是否有感觉Vue或者Nuxt中有不少报错，是源于。，具体原因可能涉及Vue或Nuxt的底层原理。有时候，之所以会报错，就是因为你使用了。的自动渲染设置，将自动渲染函数里面的。来渲染数学公式，或者修改你。

Vue-基础操作

m0_60698858的博客

08-05

218

操作 1、插值操作即将data中设置好的message的值插入到{{message}}中各种属性： v-once <span>{{number}}</span> <span v-once>{{number}}</span> 上面的number会随data中的变化而变化，而下面由于存在v-once属性，第一次赋值后number的值将不再随daat改变。 v-html 将data中的html语言识别转换 <span>..

0506 element-ui组件复制粘贴改（登录注册用element-ui的表单组件）、v-model、export和import、正则验证、v-if、登录注册切换（有无确认密码）

World11_的博客

04-03

三、页面代码中使用 if(!在表单控件或者组件上创建双向绑定。一、在validate.js中。（然后项目重启才能生效）

在vue中实现picker样式_基于Vue实现timepicker

weixin_39964899的博客

12-22

919

主要用到的还是Vue的基本知识而已，不过要想到的细节很多。先放效果，点击上框，显示timepicker。而且可以根据点击的是时还是分来改变圆盘的数字。这里我用了两个组件，和，这里的时和分的数值我挂在了根实例中，因为两个组件都需要这两个值，所以想了想我决定还是挂在根实例，通过动态绑定到组件中。HTML见在线demo。根组件var app = new Vue({el: "#app",data: {mi...

Vue的性能优化

Cola_6的博客

03-10

188

1、首屏加载优化 2、路由懒加载 { path:'/', name: 'home', component: () => import('./views/home/index.vue'), meta: { isShowHead: true } } 3、开启服务器 Gzip 开启 Gzip 就是一种压缩技术，需...

Vue源码后记-其余内置指令（2）

weixin_30784945的博客

08-16

133

　　…… 　　指令这个讲起来还有点复杂，先把html弄上来： <body> <div id='app'> <div v-if="vIfIter" v-bind:style="styleObject"> <input v-show="vShowIter" v-...

vue中，el-table树形数据与懒加载【实例】（一）——重置resetFields& lazy属性、hasChildren子项& el-select封装下拉组件& 获取当前登录人-reduce用法

weixin_44867717的博客

05-15

1019

【代码】vue中，el-table树形数据与懒加载【实例】（一）——重置resetFields& lazy属性、hasChildren子项& el-select封装下拉组件& 获取当前登录人-reduce用法。

Vue的模板语法和一些指令

待起飞的程序猿的博客

12-09

187

上篇对vue的基础知识做了一些介绍，今天开始学习vue的模板语法。前面讲到Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。关于vue的写法，除了文本插值，我们还可以像这样来绑定元素 attribute： <div id="app-2"> <span v-bind:title="m

C#datagridview和excel数据的相互导入.rar_c# datagridview_datagridview_da

datagridview与Excel相互导数据

人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目）

人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目），该项目是个人毕设项目，答辩评审分达到98分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。该资源主要针对计算机、通信、人工智能、自动化等相关专业的学生、老师或从业者下载使用，亦可作为期末课程设计、课程大作业、毕业设计等。项目整体具有较高的学习借鉴价值！基础能力强的可以在此基础上修改调整，以实现不同的功能。人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目）人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目）人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目）人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目）人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目）人工智能深度学习-使用Pytorch实现ResNet50进行跨年龄人脸识别项目源码（高分项目）人工智