Vue.jsにおける条件付きレンダリング

Vue.jsにおける条件付きレンダリングは、特定の条件が真である場合にのみ要素やコンポーネントをレンダリングする方法です。これにより、動的にコンテンツを表示または非表示にすることができます。

条件付きレンダリングは、v-if ディレクティブや v-show ディレクティブを使用して実装されます。

v-if ディレクティブ: v-if ディレクティブは、条件が真である場合に要素全体をレンダリングします。条件が偽である場合、要素はDOMから削除されます。

<template>
  <div>
    <p v-if="isVisible">このテキストは表示されます。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>

上記の例では、isVisible データプロパティが true の場合、<p> 要素が表示されます。false の場合、<p> 要素はDOMから削除されます。

v-show ディレクティブ: v-show ディレクティブは、条件が真である場合に要素を表示し、条件が偽である場合に要素を非表示にします。ただし、要素はDOM上に保持されたままです。

<template>
  <div>
    <p v-show="isVisible">このテキストは表示されます。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>

上記の例では、isVisible データプロパティが true の場合、<p> 要素が表示されますが、false の場合は非表示になりますが、DOM上には保持されます。

どちらの方法も便利ですが、v-if は条件が頻繁に変更される場合や、一度のみレンダリングする必要がある場合に適しています。一方、v-show は切り替えが頻繁に行われる要素の表示・非表示に適しています。