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:042583parcourir
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!