Vue做一个简单的随机点名册

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue做一个简单的随机点名册脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_406_0@
目录

    布局部分:

    <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做一个简单的随机点名册全部内容,希望文章能够帮你解决Vue做一个简单的随机点名册所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
    标签: