如题,
需要用到vue-animate-number插件
下载插件

# Yarn
$ yarn add animated-number-vue
 
# NPM
$ npm install animated-number-vue --save

下载完成以后引入插件以及注册
import AnimatedNumber from "animated-number-vue";

注册:

		components: {
			AnimatedNumber
		},

使用

<animated-number :value="value3" :duration="duration" :formatValue="formatToPrice" />

这里用的是但标签哦,不知道为撒我使用双标签就报错

script完整代码

	import AnimatedNumber from "animated-number-vue";
	export default {
		data() {
			return {
				value: 1000,
				value1: 1000,
				value2: 1000,
				value3: 1000,
				value4: 1000,
				value5: 1000,
				duration: 1000,
			}
		},
		components: {
			AnimatedNumber
		},
		methods: {
			formatToPrice(value) {//使用tofixed(0)限制跳动的小数位数
				return `<h3>${Number(value).toFixed(0)}</h1>`;
			},

		}
	}

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐