Vue之数字翻牌器（滚动变化数字）

template如图所示：

<template>
  <div class="chartNum">
    <div class="box-item">
      <li
      :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
      v-for="(item, index) in orderNum"
      :key="index"
      >
        <span v-if="!isNaN(item)">
          <i ref="numberItem">0123456789</i>
        </span>
        <span class="comma" v-else>{
  { item }}</span>
      </li>
    </div>
  </div>
</template>

scrpit如图所示：

<script>
export default {
  props: {
    // 显示的数字
    number: {
      type: Number,
    },
    // 显示的长度
    length: {
      type: Number,
    },
    orderNums: {
      type: Array,
    }
  },
  data() {
    return {
      orderNum: [