大屏数字的处理

num.split('')将数字变成数组

<template>
<div>
  <ul class="ul">
    <li class="li" :class="{dot:item==','}" v-for="(item,index) in orderNum" :key="index">{{ item }}</li>
  </ul>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const orderNum = ref([])
onMounted(() => {
  // toNum(1234)
  toOrderNum(1234)
})
// 处理总订单数字
const toOrderNum=(num) =>{
  num = num.toString()
  // 把订单数变成字符串
  if (num.length < 8) {
    num = '0' + num // 如未满八位数，添加"0"补位
    toOrderNum(num) // 递归添加"0"补位
  } else if (num.length === 8) {
    // 订单数中加入逗号
    num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
    orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组,将数字变成数组进行渲染
  } else {
    // 订单总量数字超过八位显示异常
    console.log('异常');
  }
}
</script>

<style lang="scss" scoped>
ul {
  display: flex;

  li {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: skyblue;
    color: #fff;
    margin-left: 10px;
  }
  .dot{
    width: auto;
    background:#000;
    line-height: 80px;
  }
}
</style>