基于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 基于面向对象的javascript
Feb 16 Javascript
js 浏览器事件介绍
Mar 30 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
JS实现扫雷项目总结
May 19 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
php封装一个异常的处理类
2017/06/08 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python中的pack和unpack的使用
2018/03/12 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
教师的实习鉴定
2013/12/15 职场文书
文秘个人求职信范文
2014/04/22 职场文书
项目建议书范文
2014/05/12 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Redis基本数据类型Set常用操作命令
2022/06/01 Redis