条件渲染以在 vue 中显示组件

【问题标题】：conditional rendering to display component in vue条件渲染以在 vue 中显示组件
【发布时间】：2021-11-26 09:57:18
【问题描述】：

我有一个父组件，它的内容应该有条件地显示

当userinput 变量为假时
<div class="parent"> 应该被移除并显示 PopUp 组件

我尝试使用 `v-if` 但不知道如何使用它元素删除整个 div

我只能使用 v-if else 更改单个元素

母公司

<template>
    <div>
        <h1>header</h1>
        <div class="parent">
            <h2>infos</h2>
            <button>x</button>
        </div>
    </div>
</template>

<script>
import PopUp from './PopUp.vue';

export default {
    data() {
        return {
            userinput: true,
        }
    }
}

</script>

子组件 - PopUp

<template>
    <div>
        <button>x</button>
        <p>errorMessage</p>
    </div>
</template>

【问题讨论】：

标签： javascript html vue.js vue-component conditional-rendering

【解决方案1】：

添加v-if="userinput" 不起作用？

如果我明白你想要什么，你应该有这样的东西：

// parent comp

<template>
  <div>
    <h1>header</h1>
    <div v-if="userinput" class="parent">
      <h2>infos</h2>
      <button>x</button>
    </div>
    <PopUp v-else/>
  </div>
</template>

不要犹豫，阅读Vue.js documentation

【讨论】：