今天小编给大家分享一下vue怎么实现数字变换动画的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
UI图数字部分如下：
emmm。所以加了个数字动态变动的效果
一开始直接在网上copy了一份。但是部分功能不太能满足需求 ，so，改动了部分，完美实现
改动部分：
1.数字不需要千位符，但是为了防止以后要有 所以加了个参数判断，默认是没有的
2.数字整数变动
3.组件改为行内元素，能更好的兼容页面样式
4.第二次数字变动在上次的数字累加
5.添加监听器防止页面不更新的情况
代码如下：
计算
安全
数据库
网络和加速
企业服务
<template>
<span class="number-grow-warp">
<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
</span>
</template>
<script>
export default {
name:'numberGrow',
props: {
time: {
type: Number,
default: 2
},
value: {
type: Number,
default: 0
},
thousandSign:{
type: Boolean,
default:()=>false
}
},
data(){
return{
oldValue:0
}
},
watch:{
value:function(value,oldValue){
this.numberGrow(this.$refs.numberGrow)
}
},
methods: {
numberGrow (ele) {
let _this = this
let value = _this.value - _this.oldValue
let step = (value * 10) / (_this.time * 100)
let current = 0
let start = _this.oldValue
let t = setInterval(function () {
start += step
if (start > _this.value) {
clearInterval(t)
start = _this.value
t = null
}
if (current === start) {
return
}
current = parseInt(start)
_this.oldValue = current
if(_this.thousandSign){
ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
}else{
ele.innerHTML = current.toString()
}
}, 10)
}
},
mounted () {
this.numberGrow(this.$refs.numberGrow)
}
}
</script>
<style lang="less" scoped>
.number-grow-warp{
transform: translateZ(0);
}
</style>就酱紫，完美实现。
引用如下：
<template>
<div>
<numberGrow :value="toNowGantryNum" :time='30'></numberGrow>
</div>
</template>
<script>
import numberGrow from '@/components/numberGrow/index.vue'
export default {
name:'monitor',
components:{numberGrow},
data(){
return{
toNowGantryNum:1068319425,
}
},
}
</script>以上就是“vue怎么实现数字变换动画”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
