vue 写一个数字卡片的效果

vue 写一个数字卡片的效果

由于面试需求，我们需要应聘者10分钟做一个效果，如图：

思路就是分割字符串成数组，然后单个显示出来。
方便初学者尝试，就是传入一个数字串，最后显示出来一个个单个字符拼接的效果。

<template>
    <div>
        <ul class="block-text">
            <li v-for="(item, index) in list" :key="index" :class="item.className">
                <div class="li-text">{{item.label}}</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data () {
        return {
            list: []
        };
    },
    props: {
        val: {
            type: [String, Number],
            default: 0
        }
    },
    methods: {
        parseNum(num) {
            let list = String(num).split('').reverse();
            for (let i = 0; i < list.length; i++) {
                if (i % 4 === 3) {
                    list.splice(i, 0, ',');
                }
            }
            return list.reverse().join('');
        },
        init () {
            let item = this.parseNum(this.val);
            this.list = [];
            for (let key in item) {
                let label = item[key];
                let obj = {
                    label,
                    className: /[0-9]/.test(label) ? 'block' : ''
                };
                this.list.push(obj);
            }
        }
    },
    watch:{
        val(){
            this.init();
        }
    },
    created () {
        this.init();
    }
};

</script>

<style lang="scss" scoped>
    .block-text{
        display: flex;
        font-size: 30px;
        line-height: 50px;
        justify-content:center;
        li {
            &.block{
                background-color: #fff;
                margin-right: 5px;
                width: 30px;
                height: 50px;
                box-shadow: 1px 1px 3px rgba(0,0,0, .1);
            }
            .li-text{
                height: 25px;
                background-image: linear-gradient(to bottom,#fff, #f1f2f4);
            }
        }
    }
</style>