vue实现数字滚动抽奖,提供一个数组,从数组里面随机滚动并抽取

好的，下面是一个简单的实现方法：

1. 首先，在 Vue.js 组件中定义一个包含数字的数组，例如：

data() {
  return {
    numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  }
}

2. 在模板中使用一个 div 元素来显示随机选中的数字。这个 div 元素需要绑定一个动态的数字滚动效果，可以使用第三方库如 animate.css 或者手写 CSS 动画来实现。

<template>
  <div class="number-container">
    <div class="number">{{ selectedNumber }}</div>
  </div>
</template>

<style>
.number-container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.number {
  font-size: 48px;
  animation: roll 2s ease-in-out infinite;
}

@keyframes roll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

3. 在组件的方法中实现随机选取数字的逻辑，并将选中的数字赋值给 selectedNumber 属性。

methods: {
  roll() {
    const index = Math.floor(Math.random() * this.numbers.length);
    this.selectedNumber = this.numbers[index];
  }
}

4. 在组件的 mounted 钩子函数中调用 roll 方法，使得组件一开始就随机选取一个数字。

mounted() {
  this.roll();
}

至此，一个简单的数字滚动抽奖功能就实现了。当用户点击抽奖按钮时，只需要再次调用 roll 方法，就可以随机选取一个新的数字并进行滚动显示。