使用vue实现简单课堂点名功能

实现思路

创建vue实例，首先给按钮给按钮添加个点击事件，data中的name属性添加学生数据，通过v-for循环动态展示学生数据，time属性来控制防止按钮被点击多次开启多个定时器，变量currentName来存入被点中的学生数据，num用来清除定时器

知识点：(不懂的可以点击链接去查看用法)

Math.floor 向下取整

Math.random 随机数

arr.push() 向数组中添加元素

<div id="root"><div class="box"><div class="left"><ul class="name"><li v-for="(item,index) in name" :key="index" :class="{current:index===current}">{{item}}</li></ul><button @click="start">开始点名</button></div><div class="right"><h3>被点中的同学:</h3><ul class="currentName"><li v-for="(item,index) in currentName" :key="index">{{item}}</li></ul></div></div></div>
</body>
<script>new Vue({el:'#root',data(){return{// 学生名字name:['鞠婧祎','成龙','甄子丹','张震','欧阳修','吴彦祖','陈冠希','刘德华','黎明','彭于晏','张学友','谢霆锋','蔡徐坤','易烊千玺','白敬亭','邓紫棋'],// 被点中的同学currentName:[],// 被点中的学生索引current:'',// 控制按钮被点击多次导致开启多个定时器time:null,num:0,}},methods:{start(){if(this.time == null){this.time = setInterval(()=>{// 生成随机数，生成的数字根据name的长度决定this.current = Math.floor(Math.random()*this.name.length);this.num++;if(this.num == 20){clearInterval(this.time);this.time = null;this.num = 0;// 把选中的同学添加到新数组this.currentName.push(this.name[this.current])}},100)}}}})
</script>

使用vue实现简单课堂点名功能相关推荐

vue 实现简单表格分页功能
使用框架实现表格展示和跳转功能,一直不懂原理.所以自己写一个简单的,加深理解. 布局分为2块,上面是表格展示数据,下面是点击按钮跳转. 效果图: 代码: <!DOCTYPE html> & ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
vue实现简单搜索功能
目录 1.概述 2.功能逻辑 2.1功能流程 2.2 流程图 3.功能实现 3.1 vue组件化 3.2 代码 3.3 动态效果 1.概述在vue项目中,搜索功能是我们经常需要使用的一个场景,最常用 ...
vue实现留言板的功能_Vue实现简单的留言板
本文实例为大家分享了Vue实现简单的留言板的具体代码,供大家参考,具体内容如下 body { /* margin: 0; */ padding-left: 10px; } #app{ width: 4 ...
抖音同款课堂点名系统PyQt5写起来很简单
刷抖音的时候发现一个老师在用的课堂点名系统.用PyQt5实现了一下同款,导入学生姓名,测试了一下完美运行. [阅读全文] 操作效果展示: 完整源代码块还是放在了文章的最后面,有需要直接运行到文末获取下 ...
抖音同款课堂点名系统，Python写起来很简单
相关文件对了大家可以关注小编的公众号哟~~ 公众号 Python日志源码领取在公众号里面回复"课堂点名系统"就可以获取啦有很多资源可以领取的哟!! 导语刷抖音的时候发现一个 ...

使用vue实现简单课堂点名功能

实现思路

使用vue实现简单课堂点名功能相关推荐

最新文章

热门文章