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

發(fā)布時(shí)間：2020-07-21 10:26:21 來(lái)源：億速云閱讀：357 作者：小豬欄目：web開(kāi)發(fā)

這篇文章主要講解了基于vue組件實(shí)現(xiàn)猜數(shù)字游戲的代碼解析，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

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

看完上述內(nèi)容，是不是對(duì)基于vue組件實(shí)現(xiàn)猜數(shù)字游戲的代碼解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽