<div id="app">
        <p>{{result}}</p>
        <button @click="randomName()">{{txt}}</button>
    </div>

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