44 lines
909 B
Vue
44 lines
909 B
Vue
<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> |