v-if v-show

最新推荐文章于 2023-12-20 15:31:46 发布
最新推荐文章于 2023-12-20 15:31:46 发布
阅读量302 收藏
点赞数
分类专栏： vue改错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ziyanCarol/article/details/88988661
版权

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元素的焦点

ziyanCarol
关注
专栏目录
Vue中v-if和v-show区别总结
小柠檬爱编程
05-13 395
一、v-if和v-show的异同点： 1.相同点 ：v-if 和 v-show都可以动态控制DOM元素的显示隐藏。 2.不同点：v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。 二、v-if和v-show特性总结 1.编译方面：按控制手段和官方文献可知，v-if是惰性的，若最初指令值为false，它是不会编译的，直至指令值为true才开始局部编译存入缓存；v-show不管最初指令值为真假都会马上编译存入缓存，保留DOM。 2.消耗
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-if设置为true为何获取不到元素
qq_42931285的博客
05-31 2139
v-if、v-show
v-if和v-show的区别，和实用场景
weixin_44368573的博客
06-27 352
共同点：v-show和v-if都是用来控制元素的显示和隐藏 区别： 1.v-if：（只判断一次）添加和删除元素的dom结构 v-show：（用于频繁的显示和隐藏）添加和删除元素的display：none/block，dom结构一直存在，所以要进行频繁的显示和隐藏的时候，使用v-show，性能更好，减少dom操作。 2.v-if可以用在template上，而v-show无效 实用场景： 问题：写一个弹框的弹出和关闭时，使用了v-if来控制，发现只有第一次弹框中的内容可以被加载出来，点击关闭弹窗后，第二次再点开
uni-app小程序v-show内容始终不显示
weixin_43655896的博客
02-13 1085
<view class="title" v-show="searchList.length">联系人</view> ...... data() { return { searchList:[], } } 使用以上方式控制该标签的显示，判断条件为searchList数组的长度，数组为空不显示标签； 浏览器运行正常，但在小程序中数组非空时也不显示 解决方法：使用计算属性 <view class="title" v-show="sea.
vue使用v-if v-show页面闪烁,div闪现的解决方法
12-12
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。 可以在根元素添加v-cloak来解决，并且设置它的样式即可。 代码只是示例，还需要自己修改测试。 <!DOCTYPE html> <...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
`v-show` 和 `v-if` 都是 Vue 中的条件渲染指令，它们的主要区别在于渲染策略：`v-if` 会根据条件决定是否编译元素，而 `v-show` 则始终编译元素，只是通过改变 CSS 的 `display` 属性来控制显示与隐藏。然而，当...
深入理解vue.js中的v-if和v-show
12-02
本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 1.共同点 都是动态显示DOM元素 2.区别 （1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-...
记一次v-for循环的项目列表，更改其中某项绑定的v-if的值后，页面未刷新的问题
weixin_54396547的博客
08-14 439
今天做一个项目的评论列表页，为了实现回复评论的功能，需要在已有的评论后点击回复更改该条数据中的inputShow值才显示回复框； 回复框默认不存在，点右边的图标之后才出现； 直接给右边按钮添加点击事件， showReplyInput (i, name, id) { const that = this; that.comments[that.index].inputShow = false that.index = i that.comments[.
v-show控制隐藏与显示--案例
m0_56471534的博客
09-07 3970
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 1865
问题 做uniapp项目的时候遇到使用v-show进行图片的切换（显示隐藏）发现v-show绑定的值变为true的时候，当前元素不进行更新 图片上传完成后赋值 如上图 employeeForm.idCardReverse有值的话就显示当前值的图片 没值的话就显示默认图片。 图片上传完成之后会给employeeForm.idCardReverse赋值。 打印结果也显示成功赋值，但是上传之前的employeeForm.idCardReverse值显示的是undefined而不是一个空字符。 于是寻找了一下
v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释
ScottePerk的博客
07-19 1755
基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。
vue: v-show 和 v-if 指令控制盒子的显示隐藏
m0_59812088的博客
11-29 5236
v-show 和 v-if 简介：1. v-show语法: v-show="布尔值" (true显示, false隐藏)原理: 实质是在控制元素的css 样式, `display: none;`2. v-if语法: v-if="布尔值" (true显示, false隐藏)原理: 实质是在动态的创建 或者 删除元素节点应用场景:如果是频繁的切换显示隐藏, 用 v-show(v-show,只是控制css样式，而。
vue中v-if不生效
qq_42990319的博客
05-10 2495
vue中v-if在el-table中未生效的原因
在vue中使用echarts 使用v-if的问题 （不能显示 以及报错"TypeError: Cannot read property 'getAttribute' of null"）
axIsMyName的博客
09-11 5770
使用echarts 添加v-if 会出现 渲染不出来 以及报错的 问题 使用v-show的时候图标会渲染出来但是 也会出现长框不一的 现象 v-if是让盒子消失 并不是改变盒子的display 属性 所以 当时你显示 v-if的时候 他会重新插入盒子 但是echarts表格并不会刷新 因为在vue中mounted hook 已经调用一遍echarts表格的方法了 解决方案 使用vue中的this...
v-if为什么会失效，什么情况下会失效
最新发布
m0_61093181的博客
12-20 2187
v-if 是 Vue中的一个指令，用于根据表达式的值的真假来切换元素的显示和隐藏。在大多数情况下，v-if 是可靠的，但是有一些情况下它可能会失效：
VUE(uni-app框架)开发微信小程序③-显示隐藏
qq_39075676的博客
10-18 4331
uni-app控制显示隐藏的方式有两种，【v-if】和 【v-show】
v-if与v-show在false和true之间改变时组件不隐藏出现问题
progrmmmm的博客
11-10 4765
当使用data、props或者vuex保存的布尔值来给v-if和v-show赋值，如： 却发现当我们用命令改变loginState时（true变flase），v-if的判断并没有消失。这里的v-if和v-show突然失效了。 （v-if代码） （改变loginState的代码） 此时我们再看前端展示： 我们可以看到loginState是true，所以界面显示登陆界面，但是当我们点击登录后 可以看到loginState由true变成了false，但是登录界面并没有消失。...
v-if v-show
07-14
v-if 和 v-show 都是 Vue 中用于控制元素显示和隐藏的指令，但它们之间有一些重要的区别。 v-if 指令是根据表达式的值来动态地添加或删除元素，当表达式的值为 true 时，元素会被添加到 DOM 中，当表达式的值为 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值