广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue做一个简单的随机点名册
  • 115
分享到

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

2024-04-02 19:04:59 115人浏览 安东尼
摘要

目录布局部分: <div id="app"> <p>{{result}}</p> <button @cli

布局部分:


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

--结束END--

本文标题: Vue做一个简单的随机点名册

本文链接: https://www.lsjlt.com/news/159091.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue做一个简单的随机点名册
    目录布局部分: <div id="app"> <p>{{result}}</p> <button @cli...
    99+
    2022-11-12
  • 怎么使用Vue做一个简单的随机点名册
    本篇内容介绍了“怎么使用Vue做一个简单的随机点名册”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!布局部分:<div id=...
    99+
    2023-06-21
  • python实战练习做一个随机点名的程序
    用python做一个简单的随机点名程序(不重复点名) 这是我来到csdn的第一篇文章,内容如果有瑕疵的地方或者代码可以进一步改善,请大家对我指点一二。谢谢!废话不多说,上代码! ...
    99+
    2022-11-12
  • JavaScript实现表格表单的随机选择和简单的随机点名
    目录一、表格表单的随机选择1.H5的布局2.CSS布局3.JS的布局二、简单的随机点名1.H5布局2.CSS布局3.JS布局三、可以自己暂停的随机点名一、表格表单的随机选择 效果展示...
    99+
    2022-11-13
    JavaScript随机点名 JavaScript 表格随机选择
  • 如何使用Vue做一个简单的todo应用
    小编给大家分享一下如何使用Vue做一个简单的todo应用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1. 引用vue.js&l...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作