Vue学习-猜大小游戏
时间:2022-06-26
本文章向大家介绍Vue学习-猜大小游戏,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天看了一会儿Vue文档,写一个猜大小的小游戏,大概这个丑样:
长这样
需求
- 按下开始之后出现输入框
- 输入数字自动与一个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
主体部分包含
- 一个 标签的标题
- 一个交互信息
- 开始/重新开始按钮
- 游戏记录
<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);
}
},
})
;
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解自动交互命令expect,免去手动输入!
- 快速掌握shell脚本的各种循环语句
- 详解shell脚本的4种表达式
- Linux shell中这7种运算命令值得掌握!
- 快速掌握shell脚本数组,看这篇
- 详解shell脚本的环境、普通、特殊变量
- 玩转zabbix之超详细的二进制安装
- 玩转zabbix之源码编译安装,添加主机监控
- 总结一篇shell调试技巧及常见的脚本错误
- 备战金九银十:当你裸辞遇到了面试难,你需要了解一下这些面试题
- 看完这7个测试常见问题总结,你的面试就成功了80%
- geant4入门讲解篇-2
- Geant4-怎样设置你的粒子源--精简注释+收藏版
- Geant4--一次编译,运行多个Run,极大提升模拟效率
- Geant4--是怎样使用的?--(1.信息抽取)