<!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>

vue猜数字游戏的更多相关文章

  1. C语言猜数字游戏

    猜数字游戏,各式各样的实现方式,我这边提供一个实现方式,希望可以帮到新手. 老程序猿就不要看了,黑呵呵 源代码1 include stdio.h include stdlib.h include ti ...

  2. 不一样的猜数字游戏 — leetcode 375. Guess Number Higher or Lower II

    好久没切 leetcode 的题了,静下心来切了道,这道题比较有意思,和大家分享下. 我把它叫做 "不一样的猜数字游戏",我们先来看看传统的猜数字游戏,Guess Number H ...

  3. java 猜数字游戏

    作用:猜数字游戏.随机产生1个数字(1~10),大了.小了或者成功后给出提示. 语言:java 工具:eclipse 作者:潇洒鸿图 时间:2016.11.10 >>>>> ...

  4. 【原创Android游戏】--猜数字游戏Version 0.1

    想当年高中时经常和小伙伴在纸上或者黑板上或者学习机上玩猜数字的游戏,在当年那个手机等娱乐设备在我们那还不是很普遍的时候是很好的一个消遣的游戏,去年的时候便写了一个Android版的猜数字游戏,只是当时 ...

  5. 【原创Android游戏】--猜数字游戏V1.1 --数据存储，Intent，SimpleAdapter的学习与应用

    --------------------------------------------------------------- V0.1版本 上次做完第一个版本后,发现还有一些漏洞,并且还有一些可以添 ...

  6. python学习笔记 ——python写的猜数字游戏 002

    from sys import exit import random def Arrfor(str): #CONTST = CONTST + 1 artificial = input("请输 ...

  7. 用MFC完成一个简单的猜数字游戏: 输入的四位数中，位置和数字都正确为A，数字相同而位置不同的为B。

    最近学习了MFC一些比较基础的知识,所以打算通过做一个简单的数字游戏来理解MFC的流程并进一步熟悉其操作. 在这里,我做了一个猜数字的小游戏.第一步当然是设计主界面,先给大家展示一下游戏界面: 主界面 ...

  8. C语言之猜数字游戏

    猜数字游戏 猜数字游戏是以前功能机上的一款益智游戏,计算机会根据输入的位数随机分配一个符合要求的数据,计算机输出guess后便可以输入数字,注意数字间需要用空格或回车符加以区分,计算机会根据输入信息给 ...

  9. c语言-猜数字游戏

    #include <stdio.h> #include <stdlib.h> int top(); int input(); void main() { ; int numbe ...

随机推荐

  1. 执行rpm -ivh 时报错：error rpmdb BDB0113 Threadprocess 11690140458095421504 failed

    执行rpm -ivh 时报错:error rpmdb BDB0113 Threadprocess 11690140458095421504 failed 1.具体报错如下: [root@heyong ...

  2. html常见标签及用法整理

    <!DOCTYPE html> <!--#浏览器的兼容模式--> <html lang="en"> <head> <!--he ...

  3. LoadPicture函数用法示例

    VB语言中LoadPicture函数用法示例: 本例使用 LoadPicture 函数将图片加载到窗体的 PictureBox 控件并从控件上清除掉该图片. 要试用此例,将 PictureBox 控件 ...

  4. vue的v-for循环渲染列表时，解决没有:key警告问题（:key的作用）

    :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下,可以进行单独渲染,减少页面资源消耗. 当前页面如果有列表渲染v-for,并且在v-for的循环标签中没有:key元素时,控制台会出 ...

  5. git分支管理与tag的学习笔记

    git分支管理学习笔记:创建dev分支:git branch dev查看分支:git branch切换分支:git checkout dev创建并切换分支:git checkout dev -b zh ...

  6. 在国外搭建 Web 服务器 - Linode VPS

    在国外搭建 Web 服务器 - Linode VPS 买一台虚拟服务器(VPS),把你网站放在上面跑跑,找找感觉,平时也可以用它来练习.前几天,搜索到了有人推荐 Linode 的 VPS,昨天又有朋友 ...

  7. man clock

    CLOCK(3)   Linux程序员手册   CLOCK(3) 名称  时钟-确定处理器时间 简介  #include <time.h>    clock_t clock(void);  ...

  8. JOI2019 有趣的家庭菜园3

    问题描述 家庭菜园专家 JOI 先生在他的家庭菜园中种植了一种叫 Joy 草的植物.在他的菜园里,有 N 个花盆自东向西摆放,编号分别为 \(1, \ldots, N\).每个花盆中有一株 Joy 草 ...

  9. RPA走专有云还是公共云？阿里云RPA公共云给出了这样几组数据…

    自从近年国外UIPATH.AUTOMATION ANYWHERE.BLUE PRISM等RPA企业的崛起,Robotic Process Automation(RPA)走进了人们视野.它以节省成本.提 ...

  10. PHP文件操作基本代码

    PHP中提供了一系列的I/O函数,能简捷地实现我们所需要的功能,包括文件系统操作和目录操作(如“复制[copy]”).下面兄弟连PHP培训 小编给大家介绍的是基本的文件读写操作:(1)读文件 ;(2) ...