suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert die Vue-Komponente die Zahlenschätzfunktion?

Wie implementiert die Vue-Komponente die Zahlenschätzfunktion?

php中世界最好的语言
php中世界最好的语言Original
2018-04-16 09:15:552043Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie die Zahlenschätzfunktion in der Vue-Komponente implementieren. Was sind die Vorsichtsmaßnahmen für die Vue-Komponente, um die Zahlenschätzfunktion zu implementieren? ein Blick. 

<!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>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie den Lebenszyklus der Vue-Komponente

JSONP-Implementierungsprinzip

Was ist der Unterschied zwischen der Verwendung von js string indexof und der Suche?

Das obige ist der detaillierte Inhalt vonWie implementiert die Vue-Komponente die Zahlenschätzfunktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php 字符串 JS
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：Registrierungsformular für Vue-KomponentenNächster Artikel：Registrierungsformular für Vue-Komponenten

In Verbindung stehende Artikel

Mehr sehen