基于vue组件实现猜数字游戏
更新时间：2020年05月28日 10:13:04 作者：匿名的girl
这篇文章主要为大家详细介绍了基于vue组件实现猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
本文实例为大家分享了vue猜数字游戏的具体代码，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>vue组件猜数字游戏</title>
<script src="http://9i0i.com/pic.php?p=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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了从0搭建vue3组件库Input组件,每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行实例代码讲解，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue的路由动画切换页面无法读取meta值的bug记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
在Vue.js中，?Vuex是一个强大的状态管理工具，而localStorage则是一种用于存储和获取本地数据的机制，虽然这两个东西都可以用来存储数据，但它们之间还是有很大的区别，本文就来简单说说吧2023-05-05
这篇文章主要介绍了vue 全局引用公共的组件以及公共的JS文件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了Vue学习之路之登录注册实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了ant-design-vue导航菜单a-menu的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue-router路由该如何使用，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
Tailwind是由Adam Wathan领导的TailwindLabs开发的 CSS 框架，这篇文章主要介绍了vue3?tailwindcss的使用,需要的朋友可以参考下2023-08-08
vue中的el-tree @node-click传自定义参数
这篇文章主要介绍了vue中的el-tree @node-click传自定义参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
最新评论