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

Question

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

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

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

我只能用 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>

Answer 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

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

conditional rendering to display component in vue

html

javascript

vue.js

conditional-rendering

vue-component