v-ifのサンプルコード

条件分岐のv-ifの使い方を覚えましょう。

v-ifを覚えれば画面表示を色々と制御できます。

概要

v-ifの条件を変えて画面の表示を変えてみます。

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

code.ameneko.com

サンプルコード

<template>
    <div class="component">
        <div v-if="isActive">isActiveが「true」になりました</div>
        <div v-if="!isActive">isActiveが「false」になりました</div>
        <button @click="isActiveButton">isActiveを変更</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isActive: true,
        }
    },
    methods:{
        isActiveButton(){
            this.isActive = !this.isActive
        }
    }
}
</script>

<style scoped>

</style>

解説

        <div v-if="isActive">isActiveが「true」になりました</div>
        <div v-if="!isActive">isActiveが「false」になりました</div>

isActiveの値がtrueかfalseで、表示を変えるようしています。

    data(){
        return{
            isActive: true,
        }
    },

データは最初はtrueにします。

<button @click="isActiveButton">isActiveを変更</button>

@clickでisActiveButtonメソッドを呼び出します。

    methods:{
        isActiveButton(){
            this.isActive = !this.isActive
        }
    }

こちらのコードでisActiveがtrueならfalseに変更、falseならtrueに変更しています。