Vue学习-猜大小游戏

今天看了一会儿Vue文档，写一个猜大小的小游戏，大概这个丑样：
欢迎关注我的公众号：zx94_11

长这样

需求

按下开始之后出现输入框
输入数字自动与一个1-100之间的数字比较
数字一致后，出现「重新开始」按钮，输入框灰显
每次输入非重复内容都会被记录

Html

head

头部导入一下Vue.js代码

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>猜大小</title>
</head>

body

主体部分包含

一个<h1>标签的标题
一个交互信息
开始/重新开始按钮
游戏记录

<div id="guess">
    <h1>猜大小游戏</h1>
    {{info}}
    <br>
    <input v-model="num1" v-show="input_status" :disabled="isdisabled">
    <button @click="playGame" v-show="hidden_status">
        {{message}}
    </button>
    <ul>
        <li v-for="info_ in info_list">
            第{{info_.id}}次猜数字,输入了<span>「{{info_.num}}」</span>,提示:{{info_.text}}
        </li>
    </ul>
</div>
<script src="index.js"></script>

{{info}}等{{xxx}}的部分会被js中的内容渲染
v-model="num1"表示输入框关联一下num1
v-show决定元素是否显示
:xxx是v-bind:的简写
- :disabled表示的是可编辑状态由变量isdisabled决定
@xxx是v-on的简写
- @click="playGame"表示，鼠标点击操作会触发playGame函数
v-for是循环增加无序标签li，答应游戏日志

Css

看页面就知道，css瞎写的

html, body {
    margin: 5px;
    padding: 0;
}

JavaScript

data中的部分都可以在html部分使用{{xxx}}渲染出来
watch是一个监听，每次输入框发生改变都会去调用changed_num()函数
created是在首次运行的时候执行的，会给一个给定的1-100内的数字
methods存放的全部的函数
- changed_num，主要的游戏结果的判断，并会把日志加入到info_list，然后被展示到无序序列里面，有几种状态：
  - 正确
  - 输入为空
  - 输入大于100
  - 输入的数字比要猜的数字大
  - 输入的数字比要猜的数字小
  - 输入非整数
- 通过内容的遍历(this.num1 == item.num)，只有没有输入过的数字的信息，才会被打印到日志中
重新开始游戏
- 把几个状态都重新刷新一下，并生成一个新的数字

var item = 0;
var guess_num = new Vue({
        el: "#guess",
        data: {
            num: '',
            num1: '',
            info: "请按「开始游戏」开始猜数字游戏",
            hidden_status: true,
            input_status: false,
            message: '开始',
            isdisabled: false,
            info_list: []
        },
        watch: {
            num1: function (newNum1, oldNum1) {
                this.info = '开始比较';
                guess_num.changed_num()
            }
        },
        created: function () {
            this.num = Math.floor(Math.random() * 100 + 1);
        },
        methods: {
            changed_num: function () {
                var regNeg = /[0-9]*/;
                let flag = true;
                if (this.num1 == this.num) {
                    this.info = '你猜对了!';
                    this.hidden_status = true;
                    this.isdisabled = true;
                } else if (this.num1 == '') {
                    flag = false;
                    this.info = '请输入一个小于100整数';
                } else if (this.num1 > 100) {
                    this.info = '请输入一个小于100的值';
                } else if (this.num1 > this.num) {
                    this.info = '你输入的数字比要猜的数字大';
                } else if (!regNeg.test(self.num1)) {
                    this.info = '请输入一个整数数字';
                } else {
                    this.info = '你输入的数字比要猜的数字小';
                }
                this.info_list.forEach(item => {
                    if (this.num1 == item.num) {
                        flag = false
                    }
                });
                if (flag) {
                    item++;
                    this.info_list.push({id: item, num: this.num1, text: this.info});
                }

            },
            playGame: function () {
                this.message = "重新开始";
                this.hidden_status = false;
                this.input_status = true;
                this.isdisabled = false;
                this.num1 = '';
                item = 0;
                self.info = '请输入数字';
                this.info_list = [];
                this.num = Math.floor(Math.random() * 100 + 1);
            }
        },
    })
;

最后编辑于：2019.05.19 16:44:38