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 ...
随机推荐
- Gradle Settings 类的学习
# 任务 了解 Settings 类作用于 Gradle 构建的哪个阶段? 了解 Settings 类与 settings.gradle 的关系 了解和使用 inlcude 方法 hook 初始化阶段 ...
- Site error: the ionCube PHP Loader needs to be installed.解决办法
问题描述: 有些模块的作者为了保护代码而采用ionCube加密的代码,所以这里必须给服务器装上这个php的扩展,就好像以前的zend一样 解决办法: http://bbs.52jscn.com/thr ...
- python 模块发布及使用
将模块(此处名为nester)写好后,与setup.py放入同一个文件夹中: //setup.py from distutils.core import setup setup( name=" ...
- 06.Linux系统-GitLab版本控制服务安装部署
官方文档:https://about.gitlab.com/install/#centos-7 1.yum install -y curl policycoreutils-python openssh ...
- [转]tKC(The Keyboard Caper)的自传
每个玩儿计算机的朋友都知道破解,或多或少地使用着各种各样的破解,也就逐渐地知道了一些著名的破解团体和破解人,比如:PC(Phrozen Crew).CiA(Crackers in Action)COR ...
- RAC heartbeat 心跳机制
世界上最遥远的距离,不是生与死.而是我们同一个集群的两个节点,你却听不到我的心跳. 必要性:维持集群的⼀致性RAC⼼跳机制 – 集群⼼跳基本机制:1.确定节点和节点间的连通性,达到彼此了解2.⽤共享的 ...
- sql视频学习关键笔记(自用记单词与学习用)
sql字段类型 numeric(18,3)-18位整数加3位小数点(货币计量最好选这类型) sql关键字 insert. update. delete alter grant 授权. revoke 回 ...
- Vue中 axios+QS 插件往后台传参
之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...
- win10如何设置软件开机启动
想要实现应用程序在所有的用户登录系统后都能自动启动,就把该应用程序的快捷方式放到“系统启动文件夹”里C:\ProgramData\Microsoft\Windows\Start Menu\Progra ...
- IDEA maven 配置，运行比较慢，加截本地仓库资源数据
在 Runner 配置了参数: -DarchetypeCatalog=internal