抽抽抽 (障眼法：随机抽)

最新推荐文章于 2022-01-25 20:08:51 发布

qq_40042753

最新推荐文章于 2022-01-25 20:08:51 发布

阅读量352

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_40042753/article/details/82287116

版权

本文介绍了一个使用Vue.js实现的简单应用案例，该案例通过点击按钮触发随机数滚动显示的效果，并最终固定显示后台设定的值。文章展示了如何利用Vue.js的数据绑定特性结合定时器来达到这一目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

信仰圣光吧

随机抽，但抽中的值不传到后台，最后显示的值从后台取。

<template>
  <div>
    <div class="box">
      <div>{{screen}}</div>
      <button @click="btn">点击开始</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      screen: '',
      timer: '',
      aList: ['1', '2', '3', '4', '5'],
      sureDate: '我我我我',
    }
  },
  methods: {
    btn: function () {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = '';
        this.screen = this.sureDate;
      } else {
        this.timer = setInterval(()=>{
          let len = this.aList.length;
          let radom = Math.random()*len;
          let integerNum = Math.floor(radom);
          this.screen = this.aList[integerNum];
        },50)
      }
    },
  }