v-show和v-if的区别以及显示隐藏不生效的奇怪现象以及点击索引错位问题的解释_vue 组件嵌套 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
          >
1
2
3
4
5
6
7
8
9
10

其实开源框架不会这么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)}"
          >
1
2
3
4
5

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

使用v-if的时候会存在一个非常严重的问题。就是如果通过v-if隐藏列表中的某项，就会导致按钮索引错乱的问题。解决办法就是必须用v-show。而使用v-show会遇到不生效的问题，解决办法就是上小节。