基于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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 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
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php接口隔离原则实例分析
2019/11/11 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
python3中int(整型)的使用教程
2017/03/23 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
python Gabor滤波器讲解
2020/10/26 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
年度考核评语
2014/01/19 职场文书
护士自我鉴定总结
2014/03/24 职场文书
保安公司服务承诺书
2014/05/28 职场文书
酒店端午节活动方案
2014/08/26 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android