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>

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

标签： javascripthtmlcssvue.js

Answer 1

使用 v-if 或 v-show （如果您希望 div 只是隐藏）

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