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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

    本文实例讲述了jQuery+vue.js实现的九宫格拼图游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } /*#piclist { width: 600p

  • 使用vue.js编写蓝色拼图小游戏

    使用vue.js编写蓝色拼图小游戏

    之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推 该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p

  • 使用vue编写一个点击数字计时小游戏

    使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束. 1.首先下载vue源码,下载地址http://cn.vuejs.org 2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解) 3.建立一个普通的ht

  • 基于Vue.js实现数字拼图游戏

    基于Vue.js实现数字拼图游戏

    先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列在下了: 1.随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次 2.点击一个数字方块后,如其上下左右有一处为空,则两者交换位置 3.格子每移动一步,我们都需要校验其是否闯关成功 4.点击重置游戏按钮后需对拼图进行重新排序 以上便是本实例的主要功能点,可见游戏功能并不复杂,我们只需一个个攻

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

    本文实例为大家分享了vue猜数字游戏的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>vue组件猜数字游戏</title> <script src="js/vue.js"></script> </head> <body> <div id

  • 基于C语言实现猜数字游戏

    基于C语言实现猜数字游戏

    前言 系统生成一个[1,100]之间数字,用户随便输入一个整数,如果用户输入的数字比系统生成的数字小,提示"猜低了",如果用户输入的数字比系统生成的数字大提示猜高了,如果相同,提示猜对了. 一.先生成一个[1,100]的随机整数 C语言的标准库中已经包含了很多现成的功能,rand可以生成一个随机整数,可以查阅cplusplus文档.浏览器输入www.cplusplus.com.cstdlib这是C++风格的写法,stdlib.h是C语言风格的写法,C++也可以用stdlib.h.C语言

  • 基于PyQt5制作一个猜数字小游戏

    基于PyQt5制作一个猜数字小游戏

    开始之前,直接来看一下实现后的效果.想自己实现或者需要源码的童鞋直接进场... 将PyQt5的相关模块直接导入即可. from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.QtWidgets import * 为了照顾一下新关注的童鞋,这里介绍一下PyQt5的安装,还是采用pip的安装方式. pip install PyQt5 将准备好的样式导入到代码块中. # 主题样式模块引用 from QCandyUi import

  • 基于JavaScript实现猜数字游戏代码实例

    环境 vscode 1.46 Microsoft Edge 83 示例 以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板 在 vscode 中新建一个 index.html 文件,然后输入以下内容. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜数字游戏</title> <style&

  • C#实现简易猜数字游戏

    本文实例为大家分享了C#实现简易猜数字游戏的具体代码,供大家参考,具体内容如下 游戏规则说明: 由系统生成一个随机数,玩家有三次猜数字的机会,如果在三次内猜出数字反馈玩家猜对了,否则Game Over! 代码设计说明: 1.首先设计一个简易的欢迎界面,并提示玩家是否开始游戏: public void Rule() { string symbol; bool flag = false; Console.WriteLine("*************************************

  • Python版的文曲星猜数字游戏代码

    复制代码 代码如下: # -*- coding: utf-8 -*- import random #数字类class NumberItem: #数字个数    _GUESS_NUMBER_COUNT_ = 4 def __init__(self):        self._num_ = [] #长度是否标准        def IsFormat(self):        return self._num_.__len__() == self._GUESS_NUMBER_COUNT_ #生成

  • python实现的简单猜数字游戏

    本文实例讲述了python实现的简单猜数字游戏.分享给大家供大家参考.具体如下: 给定一个1-99之间的数,让用户猜数字,当用户猜错时会提示用户猜的数字是过大还是过小,知道用户猜对数字为止,猜对数字用的次数越少成绩越好. import random n = random.randint(1, 99) guess = int(raw_input("Enter an integer from 1 to 99: ")) while n != "guess": print

  • js实现一个猜数字游戏

    js实现一个猜数字游戏

    看你需要猜几次才能猜到那个正确的数字! 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>猜数字游戏</title> <script type="text/javascript" cha

  • java实现的简单猜数字游戏代码

    java实现的简单猜数字游戏代码

    本文实例讲述了java实现的简单猜数字游戏代码.分享给大家供大家参考. 具体代码如下: 复制代码 代码如下: import java.util.InputMismatchException; import java.util.Scanner; public class Main {         public static void main(String[] args) {                 // 产生一个随机数                 int number = (in

  • jsp+servlet实现猜数字游戏

    jsp+servlet实现猜数字游戏主要用到了servlet方面的session,HttpServletResponse类中的sendRedirect()方法. step1,客户访问或刷新getNumber.jsp页面时,随机给用户分配一个1-100之间的数字,将该数字存放到客户的session中. <%@ page language="java" import="java.util.*" contentType="text/html;charset

随机推荐