子组件使用v-for后使用v-show控制显示隐藏时绑定的值发生变化 页面没有渲染

最新推荐文章于 2024-03-31 13:36:56 发布
最新推荐文章于 2024-03-31 13:36:56 发布
阅读量576 收藏 2
点赞数 2
文章标签： javascript html5 html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoboxiaoxing/article/details/120700575
版权

如题子组件使用v-for后使用v-show控制显示隐藏时绑定的值发生变化 页面没有渲染
代码如下v-for="item in formItems" v-show="'show' in item ? item.show : true"
此时item.show发生变化但是页面并没有跟着进行显示隐藏 需要重复点击两次才会发生变化
解决办法
在父组件改变item.show的数据的时候 使用this.$set进行赋值
代码如下

this.$set(this.formItems[4], 'show', false)

此时 改变show的时候 页面也会发生变化

xiaoboxiaoxing
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE元素的隐藏和显示（v-show指令)
08-30
本篇文章主要介绍了VUE元素的隐藏和显示（v-show指令)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue.js使用v-show和v-if的注意事项
11-30
关于两者的区别，官网是这样说的： 在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，
v-show值发生改变，页面却不显示
最新发布
Wh1_te的博客
03-31 207
在博主做vue3小兔鲜项目的时候发现，诶，放大镜这个功能完成了，但是通过判断isOutside来显示隐藏大图和蒙层小滑块出现了问题。经过比对，博主觉得自己和柴柴老师代码别无两样。于是乎打开了开发者工具又试了下isOutside是否正常获取，结果发现isOutside获取正常，这下只能是v-show的问题了。看了很多贴，说display:flex就会造成这个问题，检查了一下，发现小兔鲜给的代码确实用了flex布局。不管v-show的值为true和false，都会显示display:none，束手无策。
解决v-show数据更新后，组件未重新渲染
yyc_two的博客
12-01 3107
使用数组长度作为v-show判断条件，数组变化后，组件未渲染出来。
用v-show子组件dialog标题无法重新渲染的坑
weixin_42419575的博客
10-09 476
element table 多选表格selection-change方法slot-scope="scope"新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 selection-change方法 可以用表格中提供的@sele
vue中解决v-show中的值改变，但视图不刷新问题
热门推荐
zhangyifang_009的博客
04-11 1万+
vue中解决v-show中的值改变，但视图不刷新问题 问题：之前使用全局变量和v-show来解决div隐藏问题，类似这样 <el-button type="primary" @click="showAdvanceSearchView=!showAdvanceSearchView"> <div v-show="showAdvanceSearchView" > X...
v-for和v-show一起使用
jlb240的博客
04-19 389
vue小知识
vue中v-if,v-show与v-for指令
weixin_42645212的博客
07-27 371
v-if  控制dom存在与否 v-show 控制dom显示与否 v-for 控制一组数据，循环显示 先说下v-if： 这里实现了一个小功能，用按钮来隐藏和显示hello world  当v-if后面的值为true时，会显示该div，否则不显示。  v-if隐藏元素时，会把元素从dom树删掉 v-show  v-show隐藏元素时会给元素加一个样式d...
vue指令（v-for、v-if、v-show）
qq_59185329的博客
09-20 162
vue指令
vue通过v-for渲染的列表，可以单独操作的其中的列表的两种方法
weixin_30642029的博客
07-14 962
如图，三个标题分别有多个子元素。通过点击三个标题分别控制显示和隐藏。上代码 第一种情况：点击 青1，其所有的标题下的列表全部隐藏，也就是只有一个标题的会显示子元素 <div class="items" v-for="(item,index) in list"><div class="item_top" @click="clickTitle(index)"> /...
vue渲染时闪烁{{}}的问题及解决方法
12-03
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if...
ExtAspNet v2.2.1 （2009-4-1） 值得一看
04-01
-使用Hidden控制Window控件的显示隐藏，Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及ActiveWindow的静态方法GetCloseReference等，其中的Close全部改为Hide。 -增加TabStrip中Tab...
在VUE style中使用data中的变量的方法
01-19
如果用vue传统的动态绑定class和style的方式去修改样式（文末会提到），需要额外写很多变量和模块class，那如果我的样式的值，可以从父组件，传到子组件，子组件根据传入值去渲染对应样式的值，其实就是要再style中...
vue-review-code:vue基础知识回顾源代码
03-23
审阅代码 vue知识点回顾 声明式渲染 模板语法 文字 v-html 一次 绑定 条件渲染 如果 v-else v-else-if 表演秀 v-if vs v-show v为 上电 事件处理 模型 组件基础 综合实例
Vue3 echarts v-show无法重新渲染的问题
woflyoycm的博客
09-11 534
nextTick方法之后（Dom重新渲染）再去调用echarts图标的生成方法即可。这里需要引入nextTick方法。部分html代码如下。
Vue 常见的指令 v-if, v-show 与v-for
purple_lumpy的博客
07-22 514
v-if , v-show 都是操作元素是否显示的指令，（其对应数据项的值为 true 或者 false）。但实现方法不一样，v-if 是从dom中删掉该元素（注释），而v-show是将该元素的display 属性设置为none。 相比较来说，频繁操作时v-show 性能更高一些，偶尔操作时v-if更好一些。 下例，显示或隐藏一个div： &lt;!DOCTYPE html&gt; &lt...
v-for中的点击事件 v-show当前显示，再次点击隐藏
宁
12-26 761
<div v-for="(item,index) in box" :key="index"> <p @click="button(index)">事件按钮</p> <p v-show="activeIndex===index">显示/隐藏</p> </div> <script> data() { return { activeIndex: -1, // 初始化点击的索引值 } methods: { bu
使用v-show时，当isshow:false时，在页面刷新的过程中，短暂显示一下的问题
weixin_44673034的博客
11-14 1326
使用v-show时，当isshow:false时，在页面刷新的过程中，isshow依然会短暂显示一下 解决方法：<div v-show="isshow" v-cloak></div> 设置css样式 [v-cloak] {display: none; } ...
v-bind、v-if、v-else、v-show都可以在vue组件中实现条件渲染吗
05-25
v-if和v-else是Vue的条件渲染指令，可以根据条件动态地显示或隐藏页面元素。v-if指令根据条件判断是否显示元素，而v-else指令则是v-if的补充，用于显示与v-if相反的元素。 v-show是Vue的另一个条件渲染指令，它与v-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值