动态实时交易额前端布局vue demo

交易额前端布局vue demo"/>

动态实时交易额前端布局vue demo

需求:页面显示实时成交额

纯前端demo

一、示例代码如下

<template><div class="middle"><div class="middle-top"><div>11.11实时交易额</div><div class="top-box"><div v-for="(item, index) in topNmber" :key="index">{{ item }}</div></div><div>万元</div></div></div>
</template>
<script>
export default {data () {return {interVal: null,topData: 0,topNmber: ''}},watch: {// 监听数字补全(因为背景图片要占位:八位数)topData (val) {const _DATA = String(val)if (_DATA.length < 8) {// padStart 字符串头部补全(最小长度,'要补的字符串')// 扩展:padStart 字符串尾部补全(最小长度,'要补的字符串')this.topNmber = _DATA.padStart(8, '0')}// 最大位数if (this.topData === 99999999) {clearInterval(this.interVal)this.interVal = null}}},created () {this.interVal = setInterval(() => {this.topData++}, 1)},methods: {}
}
</script>

效果图如下:

总结

提示：以上代码仅作为练习demo;如有不正望指出