vue组件使用v-show失效

最新推荐文章于 2025-01-02 14:00:00 发布
原创 最新推荐文章于 2025-01-02 14:00:00 发布 · 428 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

文章描述了一个Vue项目中遇到的问题，即通过data属性控制的两个组件显示突然失效。尽管show的值正常，监听和直接赋值方法也无法影响组件的显示状态。最终，作者通过在外部添加div包裹并控制显示解决了问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是一个很诡异的问题，之前这个项目一直运行正常

<pointerRight ref="pointerRight" v-show="!show"></pointerRight>
<dyRight v-show="show" ref="dyRight"></dyRight>

在data里定义了一个show来控制这2个组件的显示，今天突然出问题了。show的值都正常，连使用监听另外给他定义一个值也没得反应。

<div v-show="!show"><pointerRight ref="pointerRight"></pointerRight></div>
<dyRight v-show="show" ref="dyRight"></dyRight>

最后只有加了一个div，在上面控制，就正常了。

vue transition 在子组件中失效的解决
12-30
<div v-show=showMine> <div class=mask click.self=onMask></div> <transition name=slide-fade> <div class=my_group v-if=showMine>我的 [removed] export default { name: mine, props: [showMine], ...
在vue中v-show不起作用
yangyanqin2545的博客
10-17 1421
表单分步骤提交，需要保存用户所填写过的信息，在点击上一步的时候，回显所填信息，所以不可以使用v-if来进行步骤切换，要使用v-show，但是当使用v-show的时候出现了另外一个问题：没有显示隐藏效果，而是将所有的步骤显示出来了。当v-show不起作用，很大一部分原因是因为标签设置了display属性如display：flex，该样式的优先级高于v-show的display:block或display:none，从而导致的v-show不起作用。（2）使用v-if替换v-show。
vue.js中的v-show为什么不起使用
小新-shawn的博客
05-29 8509
近日做前后端分离项目， 前端vue+element ui; 有两个相似的页面，有1个下拉选框，值是年，月，日，用来控制后面日期选择器要显示选择年，选择月，选择日； 开始是使用v-show，在第一 个页面是没有问题的； 但是在第二个页面，v-show突然不起作用了； 这里贴一下图： 页面1： ------------------------------------------- 页面2： ----------------------------------------------
服了，记一下v-show不生效的问题
weixin_60886885的博客
12-15 3074
也就是在template区域直接就写了各个小部分的节点，没有一个大的div（这就可能造成各个小部分的display:flex和v-show的display:none造成冲突，导致v-show失效） ，如上所示：通过v-show控制四个子组件的显示和隐藏，但是我加上去怎么都不生效，F12查看元素发现子组件并没有各自的父元素，而且也没有。所以，在快乐敲代码的过程中也需要注意代码的规则，不该省的千万不要省啊！这个样式（v-show底层是通过display:none控制元素的显示隐藏的）
vue3 v-show不生效
weixin_39168678的博客
03-24 4832
v-show 是通过dispaly :none来作用的 所有如果是组件 必须把组件内的元素包裹在一个tag里
Vue项目中：使用数组中的元素绑定 v-show，v-if 时的失效问题：this.$set()，Vue.set()
zyf971020的博客
02-24 1208
Vue项目中：使用数组中的元素绑定 v-show，v-if 时的失效问题：this.$set()，Vue.set()
在vue中使用el-tab-pane v-show/v-if无效的解决
12-28
我就废话不多说了，大家还是直接看代码吧~... <el v-model=settype tab-click=tabClick ref=tabs> 广告位设置 name=bannerset>广告位设置 推送设置 name=sendset>推送设置 权限管理 name=authset>权限管理 <el-t
vue3中v-show失效
最新发布
03-15
另外，引用[3]提到在表格列（如el-table-column）中使用v-show失效，因为display: table-cell的优先级高于display: none，这时候可能需要用v-if替代，或者包裹div层。引用[4]建议在组件外层包裹一个div，并在div上...
vue引用组件上使用v-if失效
06-13
出现这种情况一般是因为组件的父级元素使用了v-if，...2. 使用v-show代替v-if，因为v-show仅仅是将元素的display属性设置为none，而不会影响组件的渲染。但是v-show不支持标签，所以需要将v-show放在组件的根元素上。
vue3组件无根节点时v-show=false不生效
qq_44165941的博客
08-25 2732
vue在子组件上使用v-show时，当组件没有根节点时，v-show=false仍会显示子组件内容
vue v-show的显示和隐藏不生效了没反应了
热门推荐
树上骑个猴的博客
01-13 1万+
提供一个思路：开发时会遇到父组件调用子组件，通过在父组件的条件变量来控制子组件的隐藏与显示，因为有时候为了性能方面的考虑，不使用v-if而是时候v-show，但会遇到v-show失效的情况，这个时候可以通过给子组件传递这个条件变量，让子组件来控制自己的显示与隐藏。举个例子： 父组件： <script> import siteTree from './index/siteTree ' <template> <spa.
vue 在子组件中使用v-show指令失效解决办法
qq_58370894的博客
06-17 463
根组件中使用v-show。
v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释
ScottePerk的博客
07-19 1971
基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。
解决【v-show 有时失效】问题
知之为知之，不知为不知
11-17 5670
解决 小程序 v-show 失效 问题；v-show 样式权重；v-show hidden；剖析 v-show
vue中tab隐藏display:none（v-show无效，v-if有效）
luemeon的博客
07-28 1675
编译前和运行时标签不同。
v-show 失效？原因竟然是这！
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
01-02 1796
v-show失效原因探索
vue v-show失效解决方法
NEFU_kadia的博客
06-13 3296
很有可能是因为v-show的元素的class设置了display属性 解决办法：外面套一层div
v-show 作用在子组件上时不起作用
ANQI2333的博客
06-27 547
父组件包含两个子组件：CrudBox 组件由响应式数据 isShowMask 控制，初始化设置isShowMask 为false当v-show作用在子组件上时，隐藏显示效果不起作用如图：CrudBox组件并没有隐藏。
关于在Vue中slot插槽使用v-show无法控制显示的问题
weixin_43487760的博客
11-20 2907
在Vue中，是没有办法通过v-show的方式控制slot插槽或template占位符标签的显示的。 因为，slot和template本身并不是一个HTML元素，而v-show是通过display属性来控制元素的。所以要控制slot和template只能使用v-if ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值