VUE使用 :v-if 或 :v-show 无效

最新推荐文章于 2023-07-19 15:30:16 发布
最新推荐文章于 2023-07-19 15:30:16 发布
阅读量1.7k 收藏
点赞数 3
分类专栏： 笔记 VUE的踩坑日志 文章标签： vue.js 前端 javascript 前端框架 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51574759/article/details/126045915
版权
本文讲述了作者在使用 Vue 框架时，因长时间未接触 v-if 和 v-show 指令，错误地在它们前面添加了冒号，混淆了 v-bind 的缩写。文章提醒开发者，v-if 和 v-show 是 Vue 内置的响应式指令，不需要冒号，直接使用变量或表达式即可。通过这个小故事，强调了理解和正确使用 Vue 指令的重要性。
摘要由CSDN通过智能技术生成

我很傻，真的，很傻。

之前做显示/消除的操作，很多用的都是 component 标签 和 路由 ， 一段时间没有用 v-if v-show ，居然闹出这种笑话：

:v-if="isShow"
:v-show="isShow"

可能不熟悉，或者一段时间没有写的朋友使用这两个指令的时候，会写出这种代码。
可能会想，这怎么不对？: 可以引入响应式呀 ， 可是，我们真的没有理解错 ：的意思嘛？

让我们回顾一下 ：的意思：

强制绑定 → v-bind缩写  是  ：

想起来了吗？和v-on事件绑定的缩写是@一样，：只是v-bind的缩写，而 v-if 和 v-show 本身就是VUE的指令体系中的指令，他本身就是响应式的。所以呢，不用再加冒号啦，直接写JS变量或者表达式就可以！

v-if="isShow"
v-show="isShow"
沧州刺史
关注
专栏目录
在uniapp中使用vue3，遇到了不得不使用v-if的情况，（用v-show）就会出现难以排查的错误
bao_Heng的博客
01-12 383
在uniapp中使用vue3，遇到了不得不使用v-if的情况，（用v-show）就会出现难以排查的错误
Vue | 显示切换（v-if与v-show,display,visibility与opacity）
热门推荐
MGsniper的博客
01-16 3万+
在Vue中，实现显示切换，有以下几种手段： 1. 使用v-if指令 2. 使用v-show指令 3. 动态绑定display 4. 动态绑定visibility 5. 动态绑定opacity
vue v-show失效
qq_44381427的博客
04-06 637
使用v-show控制页面标签是否显示时，无论通过js或是通过控制台修改变量为true都无法显示，查看网页代码，发现标签中有display:none的样式。最后发现是由于我在子标签中调用了$(this).parent().hide();方法。 <div v-show="isShow"> <div onClick="$(this).parent().hide();"></div> </div> ...
踩坑 - Vue 使用 v-show 失效和element表单验证失效
aiyang1214878408的博客
06-07 1701
使用element的form表单了，通过v-if控制表单元素的显示隐藏，发现点提交时表单校验失效，打印发现会直接通过校验。明明是空数据怎么会通过呢？？! 然后排查原因发现是 v-if显示会导致表单验证失效。那好，那我就改成v-show。 改成v-show之后又发现判断条件没有生效，页面显示所有的元素，这又是为啥。然后又排查发现 本质上应该是因为 v-show 不支持 template标签，ok，改成div。最好解决了使用 v-show 失效和element表单验证失效。...
在vue中使用el-tab-pane v-show/v-if无效的解决
12-28
我就废话不多说了，大家还是直接看代码吧~ 解决方法如下： 广告位设置 推送设置 权限管理 <el-t
Vue项目中：使用数组中的元素绑定 v-show，v-if 时的失效问题：this.$set()，Vue.set()
夏已微凉、
05-04 1655
一、场景二、问题查找三、当值的对象时四、Demo，当值是二维数组时五、他山之石 一、场景 循环一个二维数组，通过点击标题，用 v-show，v-if 判断详情是否展示。 二、问题查找 可能是设置值出了问题，用 this.$set( target, propertyName/index, value )实现 参数有三个： 第一个参数是对象或数组 如果是对象，第二个参数就是属性名；如果是数组，第二个参数就是数组中的下标 第三个参数是修改的值：如果是对象就是值，如果是数组可能是值，也有可能是对象，如 {.
Vue 使用 v-show 失效
萌宅鹿的技术小屋
07-14 6987
Vue v-show 失效问题描述解决方案 问题描述 如下代码：如果 MachineQuery 中使用了 element 的库（不确定是哪些组件），v-show 会失效… <machine-query v-show="siderBar == 'MachineQuery'" id="trace" ref="trace" /> 解决方案 1、使用 v-if 替换 v-show，这个不需要很费心，换个指令即可 2、如果有时候一定要使用 v-show，可以使用如下解决方案：在组件外套一层 div 即可
vue条件判断v-if/v-show 数据判断不起作用
Hello__World123的博客
05-12 297
vue条件判断v-if/v-show数据判断不起作用了
vue v-show的显示和隐藏不生效了没反应了
树上骑个猴的博客
01-13 1万+
提供一个思路：开发时会遇到父组件调用子组件，通过在父组件的条件变量来控制子组件的隐藏与显示，因为有时候为了性能方面的考虑，不使用v-if而是时候v-show，但会遇到v-show失效的情况，这个时候可以通过给子组件传递这个条件变量，让子组件来控制自己的显示与隐藏。举个例子： 父组件： <script> import siteTree from './index/siteTree ' <template> <spa.
关于vuejs中v-if和v-show的区别及v-show不起作用问题
10-18
v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点
用vue 的v-if 或 v-show bootstrap的popover弹出框事件失效
weixin_40607363的博客
03-05 1201
<button class="btn btn-primary btn-sm" v-show="project.isCanImplement" disabled="disabled" type="button" > <#--@click="noNeed()"--> <span aria-hidden="true" data-toggle=...
v-show无效，v-if有效的影响
qq_41442428的博客
05-20 1983
v-if的作用：通过控制Dom节点的存在与否 v-show的作用是：控制元素的显隐，设置dom元素的display的样式 他们两者的区别就是是否影响性能方面， 如果经常性用到了切换，就需要用v-show 如果是偶尔性的切换，那就用v-if 但按照常理来说，不考虑性能方面，我们一般能用v-if也一定可以用到v-show 但最近小编在撸代码的过程中，遇到了一个神奇的事 我用了element ui中的table组件，有两列是要进行点击切换显隐的。如图 用了v-show失效，奇怪，后来发现，原来是因为v-show
vue3 v-show不生效
weixin_39168678的博客
03-24 4762
v-show 是通过dispaly :none来作用的 所有如果是组件 必须把组件内的元素包裹在一个tag里
v-show不起作用
qq_17798999的博客
07-17 4355
v-show仅仅控制元素的显示方式，通过display属性的none， 当你的view层或者说div层设置了 ， 那么就会不生效了，这个时候改用v-if就好了，或者说你去改display:flex,不设置成flex也可以 一、官方解释： v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么
v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释
最新发布
ScottePerk的博客
07-19 1783
基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。
在Vue3中v-if条件使用方式
04-03
在Vue3中，v-if条件使用方式与Vue2基本相同，但是有一些细微的改动。 1. 语法 Vue3中的v-if语法与Vue2相同，使用v-if指令定义条件语句。 ``` <div v-if="condition">...</div> ``` 2. 懒渲染 Vue3中的v-if指令支持懒渲染，即当条件为false时，组件不会被渲染到DOM中，这可以提高页面性能。 ``` <template> <div> <button @click="show = !show">Toggle</button> <div v-if="show" lazy>Lazy Rendered</div> </div> </template> ``` 在上面的例子中，当show为false时，lazy属性会告诉Vue3不要渲染这个组件，直到show为true时再进行渲染。 3. v-if和v-for的优先级问题 在Vue2中，v-for指令的优先级比v-if高，这意味着当v-for和v-if同时存在时，v-if会在v-for之前执行。例如： ``` <div v-for="item in items" v-if="item.show">{{item.name}}</div> ``` 在上面的例子中，如果items数组中的所有item都没有show属性或show属性为false，那么这个v-for指令就会无效，因为没有任何内容会被渲染。 在Vue3中，v-if的优先级高于v-for，这意味着即使没有任何item满足条件，v-for指令仍然会渲染出一个空的列表。 ``` <div v-for="item in items" v-if="item.show">{{item.name}}</div> ``` 在上面的例子中，即使没有任何item满足条件，v-for指令仍然会生成一个空的列表，因为v-if的优先级高于v-for。 需要注意的是，这种行为可能会影响页面性能，因为即使列表为空，Vue3仍然需要执行v-for指令。因此，在使用v-if和v-for时应该谨慎使用。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沧州刺史

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值