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

相关文章

  • Vue3 的响应式和以前有什么区别,Proxy 无敌?

    Vue3 的响应式和以前有什么区别,Proxy 无敌?

    这篇文章主要介绍了Vue3 的响应式和以前有什么区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 详解Vue 2中的  initState 状态初始化

    详解Vue 2中的  initState 状态初始化

    这篇文章主要介绍了详解Vue 2中的initState状态初始化,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-08-08
  • 在vue中实现表单验证码与滑动验证功能的代码详解

    在vue中实现表单验证码与滑动验证功能的代码详解

    在Web应用程序中,表单验证码和滑动验证是常见的安全机制,用于防止恶意攻击和机器人攻击,本文将介绍如何使用Vue和vue-verify-code库来实现表单验证码和滑动验证功能,需要的朋友可以参考下
    2023-06-06
  • 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    这篇文章主要介绍了如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vuex2中使用mapGetters/mapActions报错的解决方法

    vuex2中使用mapGetters/mapActions报错的解决方法

    这篇文章主要介绍了vuex2中使用mapGetters/mapActions报错解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • 前端vue+element使用SM4国密加密解密的详细实例

    前端vue+element使用SM4国密加密解密的详细实例

    国密即国家密码局认定的国产密码算法,主要有SM1,SM2,SM3,SM4,下面这篇文章主要给大家介绍了关于前端vue+element使用SM4国密加密解密的相关资料,需要的朋友可以参考下
    2023-03-03
  • axios无法加载响应数据:no data found for resource with given identifier报错解决

    axios无法加载响应数据:no data found for resource with given i

    最近在在做一个小查询功能的时候踩了一个坑,所以这篇文章主要给大家介绍了关于axios无法加载响应数据:no data found for resource with given identifier报错的解决方法,需要的朋友可以参考下
    2022-11-11
  • Vue响应式原理的示例详解

    Vue响应式原理的示例详解

    Vue 最独特的特性之一,是非侵入式的响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。本文将通过示例详解Vue的响应式原理,感兴趣的可以了解一下
    2022-03-03
  • Vue点击切换颜色的方法

    Vue点击切换颜色的方法

    今天小编就为大家分享一篇Vue点击切换颜色的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vee-Validate的使用方法详解

    Vee-Validate的使用方法详解

    本篇文章主要介绍了Vee-Validate的使用方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论