Maison > Article > interface Web > Exemple détaillé d'implémentation d'un jeu de devinettes basé sur les composants vue

Exemple détaillé d'implémentation d'un jeu de devinettes basé sur les composants vue

小云云original: 2017-12-26 14:08:042631parcourir

Cet article présente principalement en détail le jeu de devinettes basé sur les composants vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

L'exemple dans cet article partage le code spécifique du jeu de devinettes du numéro de vue pour votre référence. Le contenu spécifique est le suivant

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

Connexe. recommandations :

Comment écrire une boule pop-up dans le composant vue

Exemple d'utilisation d'éléments iframe dans le composant vue

Accessoires d'options de composants Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple détaillé de composant composite Vue pour implémenter la fonction de formulaire d'inscriptionArticle suivant：Exemple détaillé de composant composite Vue pour implémenter la fonction de formulaire d'inscription

Articles Liés

Voir plus