v-show 作用在子组件上时不起作用

已于 2023-07-19 10:49:50 修改
阅读量375 收藏
点赞数
文章标签： vue.js
于 2023-06-27 15:24:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ANQI2333/article/details/131417501
版权

v-show 不起作用

父组件包含两个子组件：
在这里插入图片描述
CrudBox 组件由响应式数据 isShowMask 控制，初始化设置isShowMask 为false
在这里插入图片描述
当v-show作用在子组件上时，隐藏显示效果不起作用

如图：CrudBox组件并没有隐藏
在这里插入图片描述

解决方案

将CrudBox组件包裹一层DIV，并将v-show属性作用域DIV上
在这里插入图片描述

原因：

子组件内部要保证只有一个根目录
所以另一个更加合适的解决办法是 将子组件内部所有模板代码使用一个div包裹
然后再将v-show属性写在子组件标签上即可

fuermoqi0205
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
v-show在引入子组件上不起作用
qq_45363639的博客
08-01 207
解决方法：在子组件外包一层div，将v-show写在div上。
v-show切换显示隐藏失败
Vitaliner
05-18 662
v-show不起作用
weixin_59803648的博客
07-25 5734
当v-show不起作用，很大一部分是因为该标签设置了display属性样式如displayflex，该样式的优先级高于v-show的displaynone/displayblock，导致v-show不起作用。此时可以使用v-if替代v-show，或者去掉该标签的display属性样式。...
Vue.js 踩坑分享 涉及v-show以及子传父
Youyo_littleboy的博客
10-09 294
Vue.js 踩坑分享 涉及v-show以及子传父 遇坑描述： ​ 本来想做一个弹窗效果的，但是遇到一个问题就是，可以打开弹窗，但是关闭不了。 ​ 后来通过console方法发现两个值不一致，例如我v-show绑定的值是a，a的初始打印值是false，通过父组件点击之后变成true，这部分没问题； ​ 但是子组件显示（即弹窗），点击关闭按钮，初始打印变成undefined，后面正常，这意味着值并不是同一个值。 ​ 通过百度查询想到了值存在级别问题，后用子传父方法解决。 踩坑解决 ​ 子组件 <tem
服了，记一下v-show不生效的问题
最新发布
weixin_60886885的博客
12-15 1505
也就是在template区域直接就写了各个小部分的节点，没有一个大的div（这就可能造成各个小部分的display:flex和v-show的display:none造成冲突，导致v-show失效） ，如上所示：通过v-show控制四个子组件的显示和隐藏，但是我加上去怎么都不生效，F12查看元素发现子组件并没有各自的父元素，而且也没有。所以，在快乐敲代码的过程中也需要注意代码的规则，不该省的千万不要省啊！这个样式（v-show底层是通过display:none控制元素的显示隐藏的）
在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>...
关于vuejs中v-if和v-show的区别及v-show不起作用问题
12-11
v-if 是’真正的’条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- – 直到条件第一次为真的时候才会开始渲染条件块...
vue.js使用v-model实现父子组件间的双向通信示例
10-15
在这里，`v-model`被用来将父组件的数据`num`绑定到名为`com`的子组件上。`v-model`实际上是一个简写，相当于`v-bind:value="num"`和`v-on:input="value => num = value"`的组合。 ```javascript // 子组件 import...
深入理解vue.js中的v-if和v-show
12-02
（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； （3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在...
vue中v-show和v-if的异同及v-show用法
12-12
1.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染...
使用v-show不起作用的原因有哪些-
sea
08-20 6340
使用v-show不起作用的原因有哪些- 实践： 如果是组件之类的，用v-if更好一些，如果是一些暂时性隐藏，一会要显示的,还是v-show更方便。 问题： <el-table-column align="center" label="操作" width="150" v-if="selectPT==='***'"> <template slot-scope="scope"> <el-button size="small" type="primary"
v-show控制el-table-colunm不生效
weixin_47272275的博客
06-27 3697
在使用el-table的时候，遇到对el-table-column显示与隐藏的控制时，使用v-show不生效，使用v-if样式不对。v-show起作用的本质是display:none，而因为td的display: table-cell；权限高于display:none，所以v-show失效；v-if切换标签显示隐藏时，多个相同的标签被渲染，需要使用key来区分，否则就会出现多个复用...
v-show不作用
yhr0322的博客
10-16 1353
今天在编写项目是 ：用到了v-show来决定一个元素的显示隐藏， 但是在确认业务逻辑没有问题的情况下，v-show还是不起作用， 在**console.log()**控制台输出 也确实是发生了改变，就是页面不起作用， 后来用typeof()检测了一下数据类型才知道，是字符串，他应该是boolean才对！ 原来是定义的时候搞错了 定义的时候：show:“true” 应该是：show:true...
Vue 中 el-tab-pane组件 使用v-show不生效问题
Aren的博客
07-06 3103
Vue 中 el-tab-pane 使用v-show不生效问题 在开发中遇到一个需求，需要根据是否有权限来显示和隐藏 tab页，一开始想使用v-if 来做到隐藏和显示 可是遇到了两个问题 父组件有部分依赖了子组件的值，所以需要组件的refs 里有值，但是由于v-if的惰性，可能还没有出现 ，在computed中已经开始访问 子组件里 的属性了，这时候就会报错 由于会频繁的需要展示和隐藏 这个tab，这时候v-if就会导致对于性能造成不必要的浪费 于是转而使用v-show 却发现无论变量如何改变都不会
uni-app自定义组件上使用v-show在APP端无效解决方案
bigniu的博客
10-11 2959
我们先来看下使用在自定义组件使用v-show的代码 这里的video-page是我自定义的组件 APP端会两个组件同时显示，也就是v-show无效 我在两个自定义组件上面套上一层view，并把v-show放到该父view上，即可达到需求 修改后的代码： 博主：Now大牛 QQ : 201309512 发布日期：2019年10月11日13:01:14 ...
Vue子组件的显示与隐藏
热门推荐
Rhine
04-14 5万+
在使用Vue开发前端页面的过程中，经常都会遇到需要在父组件中控制子组件的显示/隐藏。就让我们一起来看看，Vue中怎么实现吧！
如何在父组件中使用v-if或v-show来控制子组件的显示，请写出代码
04-05
父组件中使用v-if来控制子组件的显示： ``` !showChild">Toggle Child Component <child-component v-if="showChild"></child-component> import ChildComponent from './ChildComponent.vue'; export ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值