44 lines
949 B
Vue
44 lines
949 B
Vue
|
<template>
|
||
|
|
<div style="display: flex;align-items: center" class="people-number">
|
||
|
|
<div class="people-number-con">
|
||
|
|
<div v-for="(item,idx) in people" :key="idx" 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>
|