vue3实现双色球需求

<template>
  <div class="app">
    <button @click="start" v-show="!flag">开始</button>
    <button @click="end" v-show="flag">暂停</button>
    <ul>
      <li class="blueBall" v-for="(item, index) in allBall" :key="index">{{ item }}</li>
    </ul>
    <button @click="add">添加选号</button>
    <p v-for="item in list" :key="item"> {{ item }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 开关
const flag = ref(false);

// 定时器
const timer = ref(null);

// 蓝球
const blueBall = ref([]);

// 红球
const redBall = ref([]);

// 总球
const allBall = ref([]);

// 备选号
const list = ref([]);

// 初始渲染
onMounted(() => {
  randomAllBall()
});

// 随机红蓝组合 
const randomAllBall = () => {
  redBall.value = []
  blueBall.value = []
  allBall.value = []
  // 随机红球
  redBall.value[0] = Math.floor(Math.random() * 16 + 1)

  // 随机蓝球
  let i = 0;
  while (i < 6) {
    let num = Math.floor(Math.random() * 33 + 1);
    if(blueBall.value.indexOf(num) == -1){
        blueBall.value.push(num);
        i++;
    }
  }

  blueBall.value.sort((a, b) => a - b);

  allBall.value = blueBall.value.concat(redBall.value)
} 

// 开始
const start = () => {
  flag.value = true;
  timer.value = setInterval(() => {
    randomAllBall()
  }); 
};

// 结束
const end = () => {
  flag.value = false;
  clearInterval(timer.value);
};

// 添加备选号
const add = () => {
  list.value.push(String(allBall.value))
  console.log(list.value);
}




</script>

<style>
.app {
  width: 600px;
  height: 400px;
  margin: 100px auto;
}
ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.blueBall {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(0, 89, 255);
  font-size: 17px;
  color: white;
  text-align: center;
  line-height: 50px;
}
li:last-child {
  background-color: rgb(225, 2, 28);
}
</style>