lg_frontend/components/NumCon.vue

<template>
<div class="numcon">
  <div class="tip" v-for="(num, index) in numArr" :key="index">
    {{ num }}
  </div>
</div>
</template>

<script>
export default {
  name: "NumCon",
  data () {
    return {
      numArr: []
    }
  },
  props: {
    num: {
      type: [String, Number],
      default: 0
    }
  },
  watch: {
    num: {
      immediate: true,
      deep: true,
      handler () {
        this.renderTip()
      }
    }
  },
  methods: {
    renderTip () {
      const numArr = (this.num || '').split('').filter(item => item !== undefined)
      if (numArr.length <= 4) {
        while (numArr.length <= 4) {
          numArr.unshift(0)
        }
      }

      this.numArr = numArr


    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin.less";
  .numcon {
    .clear-fix;
    .tip {
      float: left;
      margin-right: 8px;
      width: 39px;
      height: 46px;
      .bg("~/assets/images/矩形 2.png");
      font-family: HIKLDH-Number-CondensedMedium;
      font-size: 24px;
      color: #08EBF5;
      letter-spacing: 0;
      font-weight: 500;
      line-height: 46px;
      text-align: center;
    }
  }
</style>