Vue做一个简单的随机点名册
更新时间:2022年01月24日 14:38:40 作者:huxiaoxiao.
这篇文章主要介绍的是如何用Vue做一个简单的随机点名册,主要是做个简单的点名器,不做样式,需要的朋友可以参考一下,希望对你有所帮助
布局部分:
<div id="app">
<p>{{result}}</p>
<button @click="randomName()">{{txt}}</button>
</div>
Vue部分:
<script>
let vm = new Vue({
el:'#app',
data:{
list:["小一","李二","王三","周四","张五"],
// 随机点名的内容
result:'',
// 按钮文本内容
txt:"开始点名",
// 流程控制开关
open:true,
// 定义计时器开关
timer:null
},
methods: {
move(){
// 获取一个 0-当前数组长度的随机数
let random = Math.floor(Math.random()*(this.list.length-0))
// 让随机数成为 list数组的随机下标,赋值给 result ,在页面渲染
this.result = this.list[random]
},
randomName(){
// 流程控制开关
if(this.open){
// 定义计时器,调用move方法
this.timer = setInterval(this.move,100)
this.txt = "停止点名"
this.open = false
}else{
// 清除计时器
clearInterval(this.timer)
this.txt = "开始点名"
this.open = true
}
}
}
})
</script>
查看结果:

到此这篇关于Vue做一个简单的随机点名册的文章就介绍到这了,更多相关Vue做随机点名册内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-12-12
vuex2中使用mapGetters/mapActions报错的解决方法
这篇文章主要介绍了vuex2中使用mapGetters/mapActions报错解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
axios无法加载响应数据:no data found for resource with given i
最近在在做一个小查询功能的时候踩了一个坑,所以这篇文章主要给大家介绍了关于axios无法加载响应数据:no data found for resource with given identifier报错的解决方法,需要的朋友可以参考下2022-11-11


最新评论