vue点名器

<template>
    <div style="margin-bottom:20px;border: 1px solid #333; width: 300px; height: 100px; color:red;font-size:20px;text-align:center;line-height:100px">
        {{ choiceItem }}
      </div>
      <el-button @click="choiceClick">{{ bian }}选择</el-button>
</template>
<script>
   data() {
    return {
      bian: "开始",
      choiceItem: "选择",
      arr: [
        "肉末豌豆",
        "肉末茄子",
        "麻婆豆腐",
        "尖椒肉丝",
        "芹菜肉丝",
        "香干肉丝",
        "鸡蛋肉片",
        "黄瓜鸡蛋",
        "黄瓜肉片",
        "白菜肉片",
        "木耳肉片",
        "土豆丝肉丝",
        "豆芽肉丝",
        "清炒白菜",
        "西红柿鸡蛋",
        "火爆大头菜",
        "酸辣土豆丝",
        "孜然蘑菇",
        "咖喱鸡",
        "鸡蛋羹",
        "清炒豆芽",
        "清炒油菜",
        "水煮肉片",
        "炒花菜",
        "香肠炒蛋",
        "酸菜五花肉",
      ],
      timer: null,
      start: 0,
    };
  },
methods: {
    choiceClick(){
      if (this.start == 0) {
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          let item = Math.round(Math.random() * (this.arr.length - 1));
          this.choice = this.arr[item];
        }, 50);
        this.bian = "结束";
        this.start = 1;
      } else {
        this.bian = "开始";
        clearInterval(this.timer);
        this.start = 0;
      }
    }
}
</script>

简单易懂，自己理解