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

Posted 2023-02-22

【中文标题】条件渲染以在 vue 中显示组件

【英文标题】：conditional rendering to display component in 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>

【参考方案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