本篇内容介绍了“怎么使用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做一个简单的随机点名册”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。