基于vue組件實(shí)現(xiàn)猜數(shù)字游戲
更新時(shí)間：2020年05月28日 10:13:04 作者：匿名的girl
這篇文章主要為大家詳細(xì)介紹了基于vue組件實(shí)現(xiàn)猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue猜數(shù)字游戲的具體代碼，供大家參考，具體內(nèi)容如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>vue組件猜數(shù)字游戲</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-game></my-game>
</div>
<script>
/*
*創(chuàng)建一個(gè)組件，my-game:
猜數(shù)字大小。
組件：一個(gè)input和一個(gè)p構(gòu)成
當(dāng)組件準(zhǔn)備掛載的時(shí)候，初始化一個(gè)隨機(jī)數(shù)，
在input取輸入的時(shí)候，
如果輸入的數(shù)字小了，在p顯示：輸入的太小了；
如果輸入的數(shù)字大了，在p顯示：輸入的太大了；
否則就提示輸入正確。
* */
//完成組件的創(chuàng)建
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 () {
//創(chuàng)建一個(gè)100以內(nèi)的隨機(jī)的整數(shù)
var num = Math.floor(Math.random()*100);
console.log(num);
this.randomNum = num;
},
//當(dāng)數(shù)據(jù)改變時(shí)執(zhí)行的操作
watch:{
myInput:function(){
if(this.myInput==this.randomNum){
this.result = "恭喜：猜對(duì)了";
}else if(this.myInput>this.randomNum){
this.result = "啊哦！猜大了";
}else{
this.result = "啊哦！猜小了";
}
}
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何解決循環(huán)引用組件報(bào)錯(cuò)的問題
這篇文章主要介紹了vue如何解決循環(huán)引用組件報(bào)錯(cuò)的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
以v-model與promise兩種方式實(shí)現(xiàn)vue彈窗組件
這篇文章主要介紹了vue彈窗組件之兩種方式v-model與promise,每種方式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
vue項(xiàng)目中圖片懶加載時(shí)出現(xiàn)的問題及解決
這篇文章主要介紹了vue項(xiàng)目中圖片懶加載時(shí)出現(xiàn)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于vue 添加axios組件,解決post傳參數(shù)為null的問題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)匯總了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue中使用svg封裝全局消息提示組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04