vue.js - 如何让我的 v-show 在 Vue JS 中显示组件

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

附录 If this.stooge = "Curly", Moe 组件仍然渲染

标签： vue.js

Answer 1

我能够通过将组件放置在 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"
    }
  }
}