Vue.js 真偽値で<p>タグを表示/非表示にしたい

Question

propsで渡ってきたisShowがtrueの時は <p class="education-description">{{ graduate() }}</p>表示してfalseの時は非表示にしたいです。
どのように書いたら実現できるのでしょうか？
わかる人いましたらご教授お願いしたいです。

<template>
  <div class="education">
    <p class="education-title">{{ name }}</p>
    <p class="education-description">{{ graduate() }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component
export default class Education extends Vue {
  @Prop({ type: String, required: true }) name: string
  @Prop({ type: Number, required: true }) endYear: number
  @Prop({ type: Boolean }) isShow: boolean
  graduate() {
    return `${this.endYear}年卒業`
  }
}

Comments

[ShintaroNomiya]

条件付きレンダリングならv-ifとかv-showがありますが、v-if="isShow"が効かないということですか？

Answer 1

v-if を使ったらいいと思います。

<p v-if="isShow" class="education-description">{{ graduate() }}</p>

https://jp.vuejs.org/v2/guide/conditional.html#v-if