【Nuxt/Vue】v-ifを使ってコンポーネントの表示を動的にする方法！

あきぞらです。

今回は、Vue.jsでv-ifを使ってコンポーネントの表示・非表示を動的に行う方法を紹介していきます。

v-ifを使ってコンポーネントの表示・非表示を動的に行う

v-ifを使って、以下のようにコンポーネントの表示・非表示を動的にしてみます。

<template>
    <div>
        <test v-if="isShow" />
    </div> 
</template>

<script>
import Test from '../test.vue';

export default {
  components: {
    Test
  },
  data() {
    return {
      isShow: false
    }
  }
  created() {
    // trueにしたりfalseにしたり
    this.isShow = true
  }
}
</script>

idShowというデータを使って、Testコンポーネントの表示を動的に行っています。

this.isShowの部分をif文などで条件を追加してあげたりすると、

条件によって表示を切り替えることができます。