v-if v-show

最新推荐文章于 2024-11-28 02:01:27 发布
原创 最新推荐文章于 2024-11-28 02:01:27 发布 · 406 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细对比了Vue.js中v-if与v-show指令的区别，重点在于它们对DOM的操作方式不同。v-if通过增删DOM实现显示隐藏，而v-show则仅改变元素的CSS属性。文章还介绍了如何解决因v-if导致的弹窗输入框无法自动聚焦的问题。

v-if和v-show最大的区别就是关于DOM元素加载方式的不同
v-if显示隐藏是将整个DOM元素删除或者添加，如果隐藏，文档将加载不到DOM元素
v-show则是简单切换元素的css属性，等同于css属性中的display，有v-show的元素会始终渲染并保持在DOM中，即DOM元素一直存在

这次碰到的错误是在弹窗上添加了v-if，所以想让弹窗中的input元素获取焦点，但是一直失败，后来才明白，v-if隐藏时，文档中并没有DOM元素，弹窗不存在，所以加载不到弹窗中的内容，故将v-if改成了v-show，文档可以查询到v-show的DOM结构

但是即使将v-if改成v-show，隐藏的弹窗中的input元素依然不能直接使用
this.$refs.input.focus()获取，
后来想到，加载时可以让焦点获取延时生效，所以使用setTimeout
在这里插入图片描述
这样即可成功在弹窗出现时，获取弹窗中input元素的焦点

vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
12-29
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在; 实现如下 maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它 <div class=mask v-show=maskShow click=setMaskShow> </div> 有一个弹框它的显示和遮罩一样,里面有个关闭按钮也可以关闭
v-show控制隐藏与显示--案例
m0_56471534的博客
09-07 4175
v-show控制隐藏与显示，v-show也是用来决定某一个元素是否在页面中显示出来。当经常需要切换某个元素的显示与隐藏时，使用v-show会更加节省性能上的开销，当只需要一次显示或隐藏时，使用v-if更合理。
vue v-show的显示和隐藏不生效了没反应了
热门推荐
树上骑个猴的博客
01-13 1万+
提供一个思路：开发时会遇到父组件调用子组件，通过在父组件的条件变量来控制子组件的隐藏与显示，因为有时候为了性能方面的考虑，不使用v-if而是时候v-show，但会遇到v-show失效的情况，这个时候可以通过给子组件传递这个条件变量，让子组件来控制自己的显示与隐藏。举个例子： 父组件： <script> import siteTree from './index/siteTree ' <template> <spa.
v-show不更新显示问题
A_Brave的博客
03-26 2173
问题 做uniapp项目的时候遇到使用v-show进行图片的切换（显示隐藏）发现v-show绑定的值变为true的时候，当前元素不进行更新 图片上传完成后赋值 如上图 employeeForm.idCardReverse有值的话就显示当前值的图片 没值的话就显示默认图片。 图片上传完成之后会给employeeForm.idCardReverse赋值。 打印结果也显示成功赋值，但是上传之前的employeeForm.idCardReverse值显示的是undefined而不是一个空字符。 于是寻找了一下
v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释
ScottePerk的博客
07-19 2126
基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。
v-if为什么会失效，什么情况下会失效
m0_61093181的博客
12-20 2841
v-if 是 Vue中的一个指令，用于根据表达式的值的真假来切换元素的显示和隐藏。在大多数情况下，v-if 是可靠的，但是有一些情况下它可能会失效：
v-if 和 v-show的区别
6块腹肌的博客
05-06 2346
v-if： 该指令用于条件性的渲染一块内容，当指令的表达式返回值为true的时候，内容会被渲染出来；如果条件一直为false，那么内容就一直不会被渲染。相反，当返回值为false的时候，内容会被销毁。 v-if可以和v-else、v-else-if搭配使用，使用方法就跟原生js上的用法基本一致。 在if 和 else的切换过程中，会复用已有的元素，而不是从头开始渲染。但是可以通过给元素添加k...
v-if与v-show
唯见青山不见君
11-20 2166
v-if与v-show
v-show与v-if的区别
小白的博客
08-10 4608
v-show与v-if的区别 v-show v-show的用法与v-if基本一致，只不过v-show是改变元素的css属性display。当v-show表达式的值为false是，元素会隐藏，查看DOM结构看到元素上加载了内联样式display:none; <h3>v-show 改变css display 的样式</h3> <div id="app26"> ...
v-if和v-show的区别
weixin_44707104的博客
05-07 260
v-if和v-show的区别 v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销...
Vue中，v-show与v-if的区别
hero_th的博客
12-20 860
v-show 根据表达式的真假，切换元素的显示与隐藏 <div id="app"> <img src="地址" v-show="true"> <img src="地址" v-show="isShow"> <img src="地址" v-show="age>=18"> </div> var app = new Vue({ el:"#app", data:{ isShow:false,
uniapp条件渲染：v-if 和 v-show
蓝鲸鱼计算机软件开发工作室
11-20 1266
v-if 有更高的切换开销，v-show 有更高的初始渲染开销 v-if 适合运营条件不大可能改变；v-show 适合频繁切换。 v-if 通过动态向DOM树增删DOM元素，v-show 设置display来进行隐藏 v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 CSS 切换；
Vue 的v-if与v-show
sunhy007的博客
07-04 1万+
在Vue的内部指令中，v-show与v-if的区别，总结如下： 在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。 v-if 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。有点类似JavaScript中的if条件判断。在Vue中除了
Vue.js当中v-if和v-show的区别
最新发布
PleaSure乐事的博客
11-28 1082
v-if 是一个条件渲染指令，用于根据表达式的值（真假）决定是否渲染元素。如果表达式为假，则该元素及其所有子元素都不会被渲染到DOM中。v-show 同样是用于控制元素显示与否的指令，但它通过CSS的display属性来实现。无论初始条件如何，元素始终会被渲染到DOM中，只是通过设置display: none;或block;等来控制其可见性。
v-if vs v-show
qq_43183527的博客
06-17 162
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if也是惰性的：如果在初始渲染时条件为假，则什么都不用做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始...
Vue中 v-show 和 v-if 的区别
qq_43692768的博客
11-02 1609
v-show 作用：根据真假切换元素的显示状态； 原理：修改元素的display，实现隐藏； 指令后面的内容最终都会解析为布尔值； 值为true元素显示，值为false元素隐藏； 数据改变之后，对应元素的显示状态会同步更新。 v-if 作用：根据表达式的真假切换元素的显示状态； 本质是通过操作dom元素来切换显示状态； 表达式的值为true，元素存在于dom树中，若为false，从dom树中移除； v-show与v-if的使用选择   v-show切换时消耗小，所以频繁的切换使用v-show，反之使
v-if 和 v-show 的区别
浮生离梦的博客
07-31 1万+
一、v-if 和 v-show 的区别 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编...
Vue里面的v-if与v-show
前端技术的学习整理
04-26 1万+
在Vue的内部指令中，v-show与v-if的区别，总结如下：在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。v-if  根据表达式的值true或false在...
v-if与v-show的区别
weixin_58155690的博客
07-04 1万+
v-if与v-show的区别
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值