Question

我试图仅在满足条件时才渲染组件。我对v-if没问题，即该组件仅在满足条件时才呈现。但是我更喜欢使用v-show（因为我希望用户经常进行切换）。

html具有类似的内容

    <Moe v-show="isMoe" />
    <Larry />
    <Curly />

脚本有这样的内容

    import Moe from "@/components/Moe.vue";
    import Larry from "@/components/Larry.vue";
    import Curly from "@/components/Curly.vue";

    export default {
      data: function() {
        return {
          stooge: "Curly"
        }
      },
      components, {
        Moe,
        Larry,
        Curly
      },
      computed: {
        isMoe() {
          return this.stooge == "Moe"
        }
      }
    }

附录如果为this.stooge = "Curly"，则Moe组件仍会渲染

Answer 1

也许这是一个术语问题，但是import将始终呈现组件。它将仅添加v-show样式并将其切换为style="display: none;"。

您的代码看起来正确，因此应表现出预期的效果。 v-show为block时是否不添加style="display: none;"？

作为附加说明。最好使用false代替===：

==

Answer 2

我能够通过将组件放置在div标签内并将v-show移到父div上来解决此问题。这是经过调整的代码：

<div v-show="isMoe">
  <Moe />
</div>
<Larry />
<Curly />



import Moe from "@/components/Moe.vue";
import Larry from "@/components/Larry.vue";
import Curly from "@/components/Curly.vue";

export default {
  data: function() {
    return {
      stooge: "Curly"
    }
  },
  components: {
    Moe,
    Larry,
    Curly
  },
  computed: {
    isMoe() {
      return this.stooge === "Moe"
    }
  }
}

我如何在Vue JS中显示我的V-show以显示组件

2 个答案: