Vue做随机点名册

最新推荐文章于 2023-12-18 15:27:56 发布

huxiaoxiao.

最新推荐文章于 2023-12-18 15:27:56 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121603375

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

这个博客展示了如何使用Vue.js创建一个简单的点名器应用。应用包含一个按钮，点击后能够随机从预设的名单中选取名字进行点名。当点击按钮时，如果点名器正在运行，会停止点名并重置按钮文本；反之，则开始点名并设置定时器以实现连续点名。代码中包含了Vue实例的声明、数据属性和方法，特别是`randomName`方法用于控制点名流程。

摘要由CSDN通过智能技术生成

布局部分：

<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>

查看结果：