<template>
   <div style="display: flex;align-items: center">
                <div class="people-number-con">
                     <div v-for="item in people" v-html="item" :class="item==','?'is-split':''"></div>
                </div>
                <div v-if="unit" class="number-unit" style="">{{unit}}</div>
            </div>
</template>

<script>
export default {
    props: {
        number: {
            type: [Number,String],
        },
        unit:{
            type:String
        }
    },
    data() {
        return {
            people:[]
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.setData()
        },
        setData(){
            var people = this.number.toString().split('')
            this.people = people
        }
    },
    watch:{
        number: function (n,o) {
            this.init()
        }
    }

};
</script>