基于vue组件实现猜数字游戏


Posted in Javascript onMay 28, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
three.js中文文档学习之通过模块导入
Nov 20 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 #Javascript
vue综合组件间的通信详解
Nov 06 #Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 #Javascript
js中apply与call简单用法详解
Nov 06 #Javascript
js实现简单数字变动效果
Nov 06 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php使用正则验证中文
2016/04/06 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
学习jquery之一
2007/04/27 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
js实现抽奖效果
2017/03/27 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
json跨域调用python的方法详解
2017/01/11 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
详解Python如何生成词云的方法
2018/06/01 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python实现多线程端口扫描
2019/08/31 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android