Vueでの条件付き表示

次に学ぶディレクティブは v-ifです。これを使用して要素を表示または非表示にすることができます。このディレクティブの仕組みは、パラメータとしてdataオブジェクトの任意のプロパティを受け取ります。そのプロパティの値がtrueの場合、要素は表示され、falseの場合は非表示になります。

例を見てみましょう。 v-if属性を持つ段落があるとします。 この属性の値は、visibleプロパティとします。以下の通りです：

App.vue<template>
  <p v-if="visible">text</p>
</template>

プロパティの値をtrueに設定してみましょう。この場合、段落は表示されます：

javascriptdata() {
  return {
    visible: true,
  }
}

一方、visibleの値をfalseに設定すると、段落は非表示になります：

javascriptdata() {
  return {
    visible: false,
  }
}