本文實例為大家分享了vue猜數字游戲的具體代碼，供大家參考，具體內容如下
<!doctype html><html> <head> <meta charset="UTF-8"> <title>vue組件猜數字游戲</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <my-game></my-game> </div> <script> /* *創建一個組件，my-game: 猜數字大小。 組件：一個input和一個p構成 當組件準備掛載的時候，初始化一個隨機數， 在input取輸入的時候， 如果輸入的數字小了，在p顯示：輸入的太小了； 如果輸入的數字大了，在p顯示：輸入的太大了； 否則就提示輸入正確。 * */ //完成組件的創建 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 () { //創建一個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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
