Vue 点名小页面

点名页面

这里放一张页面模板图

功能实现

样式啥的就不说了 各有喜好

名单打乱

created() {
   
    // 每次刷新页面打乱姓名排序
    this.students.sort(() => 0.5 - Math.random())
    // 当前名单的索引数组
    this.studentsIndex = this.students.map((v, i) => i)
}

我把名单数据放在students数组里，在vue的钩子函数里进行的打乱

开始点名

按钮的文字通过computed计算属性绑定（双向数据绑定真香）

btnText() {
   
    return this.intervalId ? '确定选择' : `点击随机抽取 ${
     this.num} 位`
}

点击事件逻辑