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

这篇具有很好参考价值的文章主要介绍了v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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)}"
          >

点击索引错位问题（v-if）

使用v-if的时候会存在一个非常严重的问题。就是如果通过v-if隐藏列表中的某项，就会导致按钮索引错乱的问题。解决办法就是必须用v-show。而使用v-show会遇到不生效的问题，解决办法就是上小节。文章来源地址https://www.toymoban.com/news/detail-583917.html

到了这里，关于v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！