【Vue】模拟抽奖广告的Vue组件

情景

双11快到了，一打开某宝某多多就是各种奇奇怪怪的广告，最多的就是抽奖的，被弄的不胜其烦，正好最近没什么动力学习，荒废时间又不合适，就干脆模仿一下这些抽奖广告，做个Vue组件。

实现效果如下图：

---

实现

涉及到的知识点

Vue

1. 动态绑定class

JavaScript

1. setInterval()、clearInterval()
2. Math对象中的random()、round()

CSS

1. flex布局

---

代码

<template>
  <div>
    <div class="lottery">
      <div class="lottery-box" v-for="(prize, index) in lottery" :key="index">
        <div v-if="prize.type === 'button'" class="lottery-button" @click="lottery_start">
          {
  { prize.text }}
        </div>
        <div v-else :class="['lottery-prize', index == active_index ? 'active' : '']">
          {
  { prize.text }}
        </div>
      </div>
    </div>
    <div class="lottery-record">
      <div v-for="(record, index) in lottery_record" :key="index">
        本次抽中：{
  { record.text }}
      </div>
    </div>
  </div>