v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释

最新推荐文章于 2025-01-02 14:00:00 发布

原创最新推荐文章于 2025-01-02 14:00:00 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

文章探讨了在Vue.js应用中使用v-show指令时遇到的显示隐藏问题，特别是当它在uView框架的自定义组件上失效。解决方案包括理解v-show的工作原理，即通过控制display属性，以及在遇到问题时如何手动设置display:none。同时提到了使用v-if可能导致的点击事件索引错位问题，推荐使用v-show作为替代。

基本概念没什么好讲的。有时候会遇到莫名其妙不显示的问题，这都是因为对这两个概念理解不透彻造成的。

v-show的本质

v-show的本质就是通过调用css的display:none来实现的，这点非常重要，出问题可以在浏览器调试页面手动设置display:none来验证到底v-show有没有生效。

显示隐藏不生效的问题

下面的代码是uview的一个组件，用于显示九宫格。其实就是循环遍历生成很多选项按钮，但是这里的v-show就是没有效果。这时候我手写style="display:none !important"也没有效果。正常情况下应该是有效果的，没效果是这个自定义组件的问题。

        <u-grid
            :border="false"
            @click="onClickAgentOptions"
            col="4"
        >
          <u-grid-item
              v-for="(option,index) in agentPerms"
              :key="index"
              v-show:option.show
          >

其实开源框架不会这么low。作者已经提供了custom-style属性：写成下面这样就可以了。parseShow处理返回none或者inline。自定义组件默认display就是inline（这点也非常重要）。
当v-show没效果的时候就需要考虑用display:none来手动实现了。
当v-show没效果的时候就需要考虑用display:none来手动实现了。
当v-show没效果的时候就需要考虑用display:none来手动实现了。

          <u-grid-item
              v-for="(option,index) in basicOptions"
              :key="index"
              :custom-style="{display: parseShow(option)}"
          >