vue 前端抽奖代码

以下是一个简单的基于Vue的抽奖代码示例：

HTML代码：

<div id="app">
  <h1>抽奖</h1>
  <button v-if="!isStarted" @click="start">开始抽奖</button>
  <div v-else>
    <h2>中奖名单</h2>
    <ul>
      <li v-for="winner in winners">{{ winner }}</li>
    </ul>
    <button @click="stop">停止抽奖</button>
  </div>
</div>

JavaScript代码：

new Vue({
  el: '#app',
  data: {
    isStarted: false, // 是否已经开始抽奖
    winners: [], // 中奖名单
    candidates: ['张三', '李四', '王五', '赵六', '陈七'], // 参与抽奖的人员名单
    timer: null // 定时器
  },
  methods: {
    start() {
      this.isStarted = true;
      this.timer = setInterval(() => {
        let index = Math.floor(Math.random() * this.candidates.length);
        let winner = this.candidates[index];
        this.winners.push(winner);
        this.candidates.splice(index, 1);
        if (this.candidates.length === 0) {
          clearInterval(this.timer);
        }
      }, 200);
    },
    stop() {
      clearInterval(this.timer);
    }
  }
});

在上面的代码中，我们使用了一个`isStarted`变量来表示是否已经开始抽奖。当用户点击“开始抽奖”按钮时，我们会设置`isStarted`为`true`，然后使用`setInterval`定时器来每200毫秒抽取一个中奖者。当抽奖结束时，我们会清除定时器并显示中奖名单。用户可以点击“停止抽奖”按钮来手动停止抽奖。