记一次vue踩坑经历

最新推荐文章于 2024-05-31 09:35:58 发布

Mr..Lawrence

最新推荐文章于 2024-05-31 09:35:58 发布

阅读量829

点赞数 1

分类专栏： Vue 文章标签： v-show vue 控制显示隐藏 js限制

本文链接：https://blog.csdn.net/weixin_43317568/article/details/89981699

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在vue中控制隐藏和显示一般都用v-show来控制,看下方例子

<div class="alarm_area">
                    <div class="alarm_title">
                        报警区
                        <div class="alarm_icon_view">
                        </div>
                        <img class="alarm_icon" src="images/baojing.png"/>
                        </div>
                        <template v-for="item in policelist">
                            <div :data-refekey="item.refeKey" class="alarm_list" v-show="item.display">
                                <div class="alarm_text">
                                    {{item.registerMeaning}} 警报
                                </div>
                                <div class="alarm_time">
                                    {{item.time}}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

如果想要控制div隐藏显示的话，一般用vm.policelist[i].display=true/false 来控制，但是使用后却没有任何效果，用set、splice也没有任何效果，最后重新写了一个固定的obj传入后在使用vm.policelist[i].display=true/false控制发现可以了，两次对比后发现如果直接将后端发来的数据直接push到policelist中则会出现无法控制的情况，如果每次都重组obj再push到数组的话即可控制，具体原因后续再做分析，此处仅做记录，

刚开始解决该问题时候，查了很多资料都说是由于 JavaScript 的限制，Vue 不能检测以下变动的数组，所以朝这个方向尝试了很久都没有效果，所以得出此结论：该问题是由于数组内数据类型问题引发的异常，而不是所谓的js限制。。。