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

vue
スポンサーリンク

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

実際のサンプルはこちら

サンプルコード

<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に結果が入ったら表示します。

コメント

タイトルとURLをコピーしました