Vue/Nuxt

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

あきぞらです。

今回は、Vue.jsv-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文などで条件を追加してあげたりすると、

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

-Vue/Nuxt

Copyright© あきぞらてっく , 2021 All Rights Reserved Powered by AFFINGER5.