Nuxt.js で条件によりコンポネートを出し入れする

サンプルコード

// index.vue
<template>
<div id="app">
  <Hello v-if="!isLogin"></Hello>
  <Goodbye v-if="isLogin"></Goodbye>
</div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false
    };
  },
};
</script>

<style>
</style>

// Hello.vue
<template>
<div>
  <h1>HELLO</h1>
</div>
</template>

<script>
export default {
  data() {
    return {};
  }
}
</script>
<style>
</style>

// Goodbye.vue
<template>
  <div >
    <h1>GOOD BYE</h1>
  </div>
</template>

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

<style>
</style>

表示確認をする

Hello.vue の「HELLO」が表示されている。

Goodbye.vue を表示させるためにはindex.vue のisLogin: false をisLogin: true に変更する。

条件付きレンダリング v-if とは？

v-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。

条件により要素を出し入れする方法は別記事にて。