javascript - 如果 props 没有值，则不显示 div

Question

我有以下组件

<template>
  <div class="pt-20 pb-4 px-6 xl:px-40 bg-theme-primary">
    <div class="text-center mb-24">
      <h1 class="text-xl lg:text-2xl uppercase font-bold mb-2">{{ mainTitle }}</h1>
      <p class="text-base">{{ mainText }}</p>
    </div>

    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "FeaturesWGrid",
  props: {
    mainTitle: String,
    mainText: String
  }
};
</script>

以及以下实现

<FeaturesWGrid>
  <Grid>
    <div class="bg-theme-secondary rounded py-4 px-12">
      <h2 class="text-xl font-medium mb-6">General</h2>
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
      <Accordion question="Start a live chat" answer="24/7" />
    </div>
  </Grid>
</FeaturesWGrid>

目前这只是虚拟内容，但是，我的本节问题不需要添加 mainTitle和mainText是否可以隐藏 <div class="text-center mb-24">如果 props 没有任何值。

Answer 1

使用 v-if 或 v-show(如果您希望隐藏 div)

<div class="text-center mb-24" v-if="mainTitle && mainText">