vue 判断两个数字相除是否为整数_Vue学习-猜大小游戏

Vue学习-猜大小游戏

今天看了一会儿Vue文档，写一个猜大小的小游戏，大概这个丑样：

欢迎关注我的公众号：zx94_11

长这样

需求

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

Html

head

头部导入一下Vue.js代码

 猜大小

body

主体部分包含

一个标签的标题

• 一个交互信息
• 开始/重新开始按钮
• 游戏记录

猜大小游戏

{{info}} {{message}} 第{{info_.id}}次猜数字,输入了「{{info_.num}}」,提示:{{info_.text}}

• {{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