基于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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
javascript的hashCode函数实现代码小结
Aug 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
php类
2006/11/27 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
javascript hashtable实现代码
2009/10/13 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
日语专业推荐信
2013/11/12 职场文书
保险内勤岗位职责
2014/04/05 职场文书
保证书格式范文
2014/04/28 职场文书
微笑服务演讲稿
2014/05/13 职场文书
施工安全标语
2014/06/07 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
博士论文答辩开场白
2015/06/01 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android