Vue猜数游戏Demo

mind · 发表于 2023-4-6 18:26:22

登录后更精彩...O(∩_∩)O...

您需要登录才可以下载或查看，没有账号？立即注册

×

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
    <!-- 引入 Vue.js 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="./vue.js"></script>
</head>
<style>
    v-cloak{
        display: none;
    }
</style>

<body>
    <div id="app" v-cloak>
        <!-- V层 -->
        欢迎体验猜数字游戏<br />
        请输入你要猜的数字（1~10的整数）：
        <input type="text" v-model = "guessNumber" />
        <input type="button" value="猜一猜" @click="guess" />

        <div>
            {{message}}
        </div>
        <!-- 插值表达式，支持的四种类型 -->
    </div>
    <script>
        //创建Vue.js对象
        const vm = new Vue({
            el: '#app',
            data: {
                //M层
                randomNumber: 0,
                guessNumber:'',
                times:0,
                message:''
            },
            created(){                  //定义创建函数，在创建Vue.js对象的时候自动执行
                let random = parseInt((Math.random())*10)
                this.randomNumber = random %10 +1
            },
            methods:{
                guess(){
                    this.times++
                    this.guessNumber = parseInt(this.guessNumber)

                    if(this.guessNumber <this.randomNumber){
                        this.message = '你输入的数字太小了，请往大了猜！'
                    }else if(this.guessNumber>this.randomNumber){
                        this.message = '您输入的数字太大了，请往小了猜！'
                    }else{
                        this.message = "恭喜您猜中了，一共猜了 "+this.times+" 次。"
                    }
                }
            }
        })
    </script>
</body>

</html>

		自动登录	找回密码
密码			立即注册