组件的
props 中：
props: {
number: {
type: Number,
default: 0
}
}补位
因为我们的业务需要，我们最大的位数是
8 位数字，所以定义一个常量：
const MAX_LEN = 8假如传递的位数不足
8 位，我们需要对它进行补
0 的操作，补
0 完成以后，我们也需要把它转换成金额的格式由于此部分代码较常见，为节省篇幅，就不展示代码，可自行书写相关js代码。
渲染
我们根据上面补位字符串，分隔成字符数组，在页面中进行渲染：
computeNumber:为字符数组，例如：[‘0′,’0′,’,’,’0′,’0′,’0′,’,’,’9′,’1′,’7′]
html 部分代码：
<ul>
<li
:class="{'number-item': !isNaN(item) }"
v-for="(item,index) in computeNumber"
:key="index"
>
<span v-if="!isNaN(item)">
<i ref="numberItem">0123456789</i>
</span>
<span v-else>{{item}}</span>
</li>
</ul>
css 部分代码：
.number-item {
width: 50px;
background: url(./number-bg.png) no-repeat center center;
background-size:100% 100%;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
transition: transform 0.5s ease-in-out;
letter-spacing: 10px;
}
}
}页面渲染效果：
数字随机增长，模拟轮询效果
页面渲染完毕后，我们来让数字滚动起来，设计如下两个方法，其中
increaseNumber 需要在
Vue 生命周期
mounted 函数中调用
// 定时增长数字
increaseNumber () {
let self = this
this.timer = setInterval(() => {
