Nuxt.js で条件により要素を出し入れする

サンプルコード

<template>
<div id="test">
  <p v-if="hoge">条件「hoge」は true です。</p>
  <p v-else>条件「hoge」は false です。</p>
</div>
</template>

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

<style>
</style>

表示確認

上記コードの状態だと、下記表示になる。

条件「hoge」は true です。

hoge: true を hoge: false にすると、下記表示になる。

条件「hoge」は false です。

条件によりコンポネートごと出し入れする方法は別記事にて。