基于vue組件實(shí)現(xiàn)猜數(shù)字游戲

更新時(shí)間：2020年05月28日 10:13:04 作者：匿名的girl

這篇文章主要為大家詳細(xì)介紹了基于vue組件實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue猜數(shù)字游戲的具體代碼，供大家參考，具體內(nèi)容如下

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue組件猜數(shù)字游戲</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
  <p>{{msg}}</p>
  <my-game></my-game>
 </div>
 <script>
 /*
 *創(chuàng)建一個(gè)組件，my-game:
  猜數(shù)字大小。
  組件：一個(gè)input和一個(gè)p構(gòu)成
  當(dāng)組件準(zhǔn)備掛載的時(shí)候，初始化一個(gè)隨機(jī)數(shù)，
  在input取輸入的時(shí)候，
  如果輸入的數(shù)字小了，在p顯示：輸入的太小了；
  如果輸入的數(shù)字大了，在p顯示：輸入的太大了；
  否則就提示輸入正確。
 * */

 //完成組件的創(chuàng)建
  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 () {
  //創(chuàng)建一個(gè)100以內(nèi)的隨機(jī)的整數(shù)
  var num = Math.floor(Math.random()*100);
  console.log(num);
  this.randomNum = num;
  },
   //當(dāng)數(shù)據(jù)改變時(shí)執(zhí)行的操作
   watch:{
    myInput:function(){
     if(this.myInput==this.randomNum){
      this.result = "恭喜：猜對(duì)了";
     }else if(this.myInput>this.randomNum){
      this.result = "啊哦！猜大了";
     }else{
      this.result = "啊哦！猜小了";
     }
    }
   }
  })
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
 </script>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中的計(jì)算屬性實(shí)例詳解
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。接下來(lái)通過(guò)本文給大家介紹vue中的計(jì)算屬性,需要的朋友可以參考下
2018-09-09
Vue使用Markdown文檔的示例
本文主要介紹了Vue使用Markdown文檔的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解Vue中表單組件的雙向數(shù)據(jù)綁定
Vue?提供了雙向數(shù)據(jù)綁定機(jī)制,使得開(kāi)發(fā)者可以輕松地將表單組件的值與?Vue?實(shí)例中的數(shù)據(jù)進(jìn)行關(guān)聯(lián),本文將詳細(xì)介紹如何在?Vue?中使用這些表單組件,并實(shí)現(xiàn)雙向數(shù)據(jù)綁定,需要的可以參考下
2024-03-03
前端Vue學(xué)習(xí)之購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)記錄
購(gòu)物車(chē)是電商必備的功能,可以讓用戶一次性購(gòu)買(mǎi)多個(gè)商品,下面這篇文章主要給大家介紹了關(guān)于前端Vue學(xué)習(xí)之購(gòu)物車(chē)項(xiàng)目的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
Vue如何實(shí)現(xiàn)監(jiān)聽(tīng)組件原生事件
這篇文章主要介紹了Vue如何實(shí)現(xiàn)監(jiān)聽(tīng)組件原生事件,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
vue使用pdf.js預(yù)覽pdf文件的方法
在頁(yè)面進(jìn)行pdf預(yù)覽的時(shí)候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來(lái)通過(guò)本文給大家介紹vue使用pdf.js來(lái)進(jìn)行pdf預(yù)覽,需要的朋友可以參考下
2021-12-12
Element的Message彈窗重復(fù)彈出問(wèn)題解決
本文主要介紹了Element的Message彈窗重復(fù)彈出，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套u(yù)i組件庫(kù)，目前最新版本 react 和 vue 等主流框架都有支持。該庫(kù)默認(rèn)主題色是天藍(lán)色，若用于項(xiàng)目開(kāi)發(fā)，難免遇到要需求修改其默認(rèn)樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下
2023-12-12