KMDのプログラミングメモノート

主にUnity(C#)を中心としたプログラムの備忘録

Vue3 v-ifを用いた条件分岐





参考サイト

こちらの公式サイトを参考にしました。
jp.vuejs.org




使用例1(真偽により切り替え)

appdata内のenabledの真偽により表示を切り替えるコードを作成しました。


ソースコード

<div id="idName">
    <div v-if="enabled">enabled = true</div>
    <div v-else>enabled = false</div>
</div>

<script>
    const appdata = {
        data: function () {
            return {
                enabled: true
            }
        }
    }
    Vue.createApp(appdata).mount('#idName')
</script>




実行結果(こちらはtrueの場合)


enabled = true
enabled = false






使用例2(ボタンの入力値により処理内容を変化させる)

ボタンの入力によりdata内の書き換えを行い、その書き換えた値によって表示内容を変化させます。


ソースコード

<div id="idName">
    <!--ボタンを表示-->
    <div>
        <button @click="setSeason('春')"></button>
        <button @click="setSeason('夏')"></button>
        <button @click="setSeason('秋')"></button>
        <button @click="setSeason('冬')"></button>
    </div>
    
    <!-- seasonにより表示内容を決定 -->
    <div v-if = "season === '春'">spring</div>
    <div v-else-if = "season === '夏'">summer</div>
    <div v-else-if = "season === '秋'">fall</div>
    <div v-else>winter</div>
</div>

<script>
    const appdata = {
        data() {
            return { season: '春' }
        },

        methods: {
            setSeason(a) {
                this.season = a
            }
        }
    }
    Vue.createApp(appdata).mount('#idName')
</script>




実行結果(ボタンを押すと対応した英語を表示)

spring
summer
fall
winter