vue猜数字游戏
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>vue组件猜数字游戏</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-game></my-game>
</div>
<script>
/*
*创建一个组件，my-game:
猜数字大小。
组件：一个input和一个p构成
当组件准备挂载的时候，初始化一个随机数，
在input取输入的时候，
如果输入的数字小了，在p显示：输入的太小了；
如果输入的数字大了，在p显示：输入的太大了；
否则就提示输入正确。
* */ //完成组件的创建
Vue.component("my-game",{
data:function(){
return {
randomNum:0,
myInput:0,
result:""
}
},
template:`
<div>
<input type="text" v-model.number="myInput"/>
<br>
<p>{{result}}</p>
</div>
`,
beforeMount: function () {
//创建一个100以内的随机的整数
var num = Math.floor(Math.random()*100);
console.log(num);
this.randomNum = num;
},
//当数据改变时执行的操作
watch:{
myInput:function(){
if(this.myInput==this.randomNum){
this.result = "恭喜：猜对了";
}else if(this.myInput>this.randomNum){
this.result = "啊哦！猜大了";
}else{
this.result = "啊哦！猜小了";
}
}
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue猜数字游戏的更多相关文章
- C语言猜数字游戏
猜数字游戏,各式各样的实现方式,我这边提供一个实现方式,希望可以帮到新手. 老程序猿就不要看了,黑呵呵 源代码1 include stdio.h include stdlib.h include ti ...
- 不一样的猜数字游戏 — leetcode 375. Guess Number Higher or Lower II
好久没切 leetcode 的题了,静下心来切了道,这道题比较有意思,和大家分享下. 我把它叫做 "不一样的猜数字游戏",我们先来看看传统的猜数字游戏,Guess Number H ...
- java 猜数字游戏
作用:猜数字游戏.随机产生1个数字(1~10),大了.小了或者成功后给出提示. 语言:java 工具:eclipse 作者:潇洒鸿图 时间:2016.11.10 >>>>> ...
- 【原创Android游戏】--猜数字游戏Version 0.1
想当年高中时经常和小伙伴在纸上或者黑板上或者学习机上玩猜数字的游戏,在当年那个手机等娱乐设备在我们那还不是很普遍的时候是很好的一个消遣的游戏,去年的时候便写了一个Android版的猜数字游戏,只是当时 ...
- 【原创Android游戏】--猜数字游戏V1.1 --数据存储，Intent，SimpleAdapter的学习与应用
--------------------------------------------------------------- V0.1版本 上次做完第一个版本后,发现还有一些漏洞,并且还有一些可以添 ...
- python学习笔记 ——python写的猜数字游戏 002
from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输 ...
- 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。
最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...
- C语言之猜数字游戏
猜数字游戏 猜数字游戏是以前功能机上的一款益智游戏,计算机会根据输入的位数随机分配一个符合要求的数据,计算机输出guess后便可以输入数字,注意数字间需要用空格或回车符加以区分,计算机会根据输入信息给 ...
- c语言-猜数字游戏
#include <stdio.h> #include <stdlib.h> int top(); int input(); void main() { ; int numbe ...
随机推荐
- CentOS上安装Git及配置远程仓库
首先登陆CentOS服务器,连接上服务器之后我们使用yum remove git 命令删除已安装的Git,若之前没安装过Git则不需要这一步.注意前提是你的CentOS服务器上安装了yum,这是Cen ...
- 2019 计蒜之道 复赛 B. 个性化评测系统 （模拟，实现，暴搜）
24.02% 1000ms 262144K "因材施教"的教育方式自古有之,互联网时代,要实现真正意义上的个性化教育,离不开大数据技术的扶持.VIPKID 英语 2020 多万学员 ...
- caffe与tensorflow中的pooling
两个框架对poolin的处理方式不同,这就导致在转模型时容易踩雷 tensorflow通过“VALID”和“SAME”参数来控制 caffe 通过pad值来控制 参考:https://blog.csd ...
- GUI学习之十八——QDateTimeEdit学习总结
在前面两章我们总结了QSpinBox和QDoubleSpinBox的用法,今天来总结一下QDateTimeEdit控件的基本用法 一.描述 1.QDateTimeEdit是一个用来编辑日期和时间的单行 ...
- Python中numpy的应用
#创建ndarray import numpy as np nd = np.array([2,4,6,'])#numpy中默认ndarray的所有元素的数据类型是相同,如果数据的类型不同,会统一为统一 ...
- FAT12
FAT12 is one of FAT file system families,mostly used on 1.44MB floppy disk. FAT 's full name is File ...
- CSS3之mix-blend-mode
<!-- more --> 在线编辑demo 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合. mix-blend-mode: normal; //正常 mix-bl ...
- Python 序列化 pickle/cPickle模块
Python 序列化 pickle/cPickle模块 2013-10-17 Posted by yeho Python序列化的概念很简单.内存里面有一个数据结构,你希望将它保存下来,重用,或者发送给 ...
- LA 4327 Parade(单调队列优化dp)
题目链接: 题目大意(摘自刘汝佳<<算法竞赛入门经典--训练指南>>):F城是由n+1条横向路和m+1条竖向路组成.你的任务是从最南边的路走到最北边的路,使得走过的路上的高兴值 ...
- UTC和GMT
UTC GMT UTC = Coordinated Universal Time. 中文名称为协调世界时. GMT = Greenwich Mean Time. 中文名称为格林尼治(平)时 UTC = ...