Vue做一個簡單的隨機點名冊
佈局部分:
<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做隨機點名冊內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!