Vue.jsで作るおみくじアプリのサンプルコード

ボタンを押すと運勢がランダムで表示されるおみくじアプリのサンプルコードです。

実際のサンプルはこちら

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

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

code.ameneko.com

サンプルコード

<template>
    <div class="omikuji">
        <p>今日の運勢は…？</p>
        <div class="omikuji_start">
            <button @click="startOmikuji">おみくじを引く</button>
        </div>
        <div class="omikuji_result">
            <p v-if="result">あなたは：{{result}}です！</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            choice: ["大吉", "中吉", "小吉", "凶"],
            result: null,
        }
    },
    methods:{
        startOmikuji(){
            //ランダムで相手の数字を決定する
            var num = Math.floor( Math.random()*4 );
            this.result = this.choice[num]
        }
    }
}
</script>

<style scoped>

</style>

解説

methods:{
        startOmikuji(){
            //ランダムで相手の数字を決定する
            var num = Math.floor( Math.random()*4 );
            this.result = this.choice[num]
        }
    }

Math.ramdomで乱数を作ります。

choiceの配列に入れた運勢をresultに代入します。

<div class="omikuji_result">
            <p v-if="result">あなたは：{{result}}です！</p>
        </div>

v-ifを使うことで、resultに結果が入ったら表示します。