Vue做随机点名册

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Vue做随机点名册

huxiaoxiao.   2022-05-23 我要评论

布局部分:

<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做随机点名册内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们