携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

每到中午，我就会陷入一个困境，不知道吃什么，今天和同事讨论了一下，我发现并不止我一个人这样，作为一名小白程序员，我毅然决然的准备使用代码解决这个问题，今天我们就使用Vue解决一下吧

效果图

页面结构

我们的页面结构是一个盒子用于存放我们喜欢的菜品，一个是用于存放开始选择和停止选择的按钮的盒子，开始选择和停止选择的按钮分别绑定了开始选择菜品事件，当我们点击的时候存放菜品的盒子会开始跳动，当我们点击停止的时候，存放菜品的盒子就会停止跳动，然后就会呈现出我们今天要吃的菜品，完美解决我们吃饭纠结的问题

  <div id="app">
    <div class="Exhibition">{{food[foodIdx]}}</div>
    <div class="btns">
      <button @click="start">开始</button>
      <button @click="stop">停止</button>
    </div>
  </div>

样式

我们对其样式做一些调整

#app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }
  .Exhibition {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  .btns {
    margin-top: 20px;
    display: flex;
 
  }
   button {
      margin-right: 10px;
    }

逻辑实现

我们声明三个变量，food变量用于存放我们喜欢吃的菜品，这样避免了我们选择到自己不喜欢吃的菜，foodIdx是菜品的下标，主要用于变动显示的菜品，timer是存放变动菜品的定时器

export default {
  data() {
    return {
    //这里可以放我们喜欢菜品
      food: [
        "大米饭",
        "瓜丝儿",
        "山鸡丁儿"
      ],
      //菜品下标
      foodIdx: 0,
      //菜品定时器
      timer: null,
  
    };
  },
  watch: {},
  methods: {
 //开始选择菜品
    start() {
    //先清除一下菜品定时器，防止多次点击开始
      clearInterval(this.timer);
     //实现菜品的变换我们这里是通过周期性定时器执行随机获取菜品下标方法，使得菜品可以变换
      this.timer = setInterval(() => {
        this.getFood();
      }, 50);
    },
    //获取菜品下标方法
    getFood() {
    //最小值
      const Min = 0;
      //菜品列表最大值，因为length是整个列表的长度，但是下标是从零开始的所以需要减去1
      const Max = this.food.length - 1;
      //通过Math函数方法动态的获取最大值和最小值之间的值，作为菜品下标并赋值，使得页面上的菜品刷新
      this.foodIdx = Math.round(Math.random() * (Max - Min) + Min);
    },
    //停止菜品选择
    stop() {
    //我们是通过周期性定时器实现菜品的变化，所以当我们一清除周期性定时器，菜品变换自然而然的也停止了，页面上就是我们今天随机选择的菜品
      clearInterval(this.timer);
    }
  }
};

代码我放到码上掘金上了，有兴趣的朋友们，大家可以看一看！

坚持努力，无惧未来！