Heim > Artikel > Web-Frontend > Detailliertes Beispiel für die Implementierung eines Ratespiels basierend auf Vue-Komponenten

Detailliertes Beispiel für die Implementierung eines Ratespiels basierend auf Vue-Komponenten

小云云Original: 2017-12-26 14:08:042631Durchsuche

Dieser Artikel stellt hauptsächlich das auf Vue-Komponenten basierende Ratespiel vor. Ich hoffe, dass es jedem helfen kann.

Das Beispiel in diesem Artikel teilt den spezifischen Code des Vue-Zahlen-Ratespiels als Referenz. Der spezifische Inhalt ist wie folgt

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue组件猜数字游戏</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <my-game></my-game>
  </p>
  <script>
  /*
  *创建一个组件，my-game:
   猜数字大小。
   组件：一个input和一个p构成
   当组件准备挂载的时候，初始化一个随机数，
   在input取输入的时候，
   如果输入的数字小了，在p显示：输入的太小了；
   如果输入的数字大了，在p显示：输入的太大了；
   否则就提示输入正确。
  * */

  //完成组件的创建
    Vue.component("my-game",{
      data:function(){
        return {
          randomNum:0,
          myInput:0,
          result:""
        }
      },
      template:`
        <p>
          <input type="text" v-model.number="myInput"/>
          <br>
          <p>{{result}}</p>
        </p>
      `,
      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>

Verwandt Empfehlungen:

So schreiben Sie einen Popup-Ball in der Vue-Komponente

Beispiel für die Verwendung von Iframe-Elementen in der Vue-Komponente

Requisiten für Vue-Komponentenoptionen

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Implementierung eines Ratespiels basierend auf Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Beispiel einer Vue-Verbundkomponente zur Implementierung der RegistrierungsformularfunktionNächster Artikel：Detailliertes Beispiel einer Vue-Verbundkomponente zur Implementierung der Registrierungsformularfunktion

In Verbindung stehende Artikel

Mehr sehen