怎么使用Vue做一個簡單的隨機(jī)點(diǎn)名冊

本篇內(nèi)容介紹了“怎么使用Vue做一個簡單的隨機(jī)點(diǎn)名冊”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

布局部分：

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

Vue部分：

 <script>
        let vm = new Vue({
            el:'#app',
            data:{
                list:["小一","李二","王三","周四","張五"],
                // 隨機(jī)點(diǎn)名的內(nèi)容
                result:'',
                // 按鈕文本內(nèi)容
                txt:"開始點(diǎn)名",
                // 流程控制開關(guān)
                open:true,
                // 定義計(jì)時(shí)器開關(guān)
                timer:null
            },
            methods: {
                move(){
                    // 獲取一個 0-當(dāng)前數(shù)組長度的隨機(jī)數(shù)
                    let random = Math.floor(Math.random()*(this.list.length-0))
 
                    // 讓隨機(jī)數(shù)成為 list數(shù)組的隨機(jī)下標(biāo)，賦值給 result ，在頁面渲染
                    this.result = this.list[random]
                },
                randomName(){
                    // 流程控制開關(guān)
                    if(this.open){
                        // 定義計(jì)時(shí)器，調(diào)用move方法
                        this.timer = setInterval(this.move,100)
                        this.txt = "停止點(diǎn)名"
                        this.open = false
                    }else{
                        // 清除計(jì)時(shí)器
                        clearInterval(this.timer)
                        this.txt = "開始點(diǎn)名"
                        this.open = true
                    }
                }
            }
        })
    </script>

“怎么使用Vue做一個簡單的隨機(jī)點(diǎn)名冊”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！