Exemple détaillé d'implémentation d'un jeu de devinettes basé sur les composants vue-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-26 14:08:04

original

2595 Les gens l'ont consulté

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>

Copier après la connexion

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!