如何实现Vue中数字金额的动态变化功能？

本文共计968个文字，预计阅读时间需要4分钟。

目录 + 1 + 前言 + 2 + 数字动态滚动 + 2.1 + 计时器实现 + 2.2 + 动画帧实现 + 3 + 总结 + 1 + 前言 + 在某些场景中，我们需要能够动态与用户交互，例如页面加载时，动态变化一个固定数字。

目录

• 1 前言
• 2 数字动态滚动
• 2.1 计时器实现
• 2.2 动画帧实现
• 3 总结

1 前言

  在某些场景中，要求我们能够动态与用户进行交互，如页面加载一个数字的时候，动态改变一个固定地数字，然后将数字展现在页面上，如当前的积分或者余额等；以达到提高与用户交互体验的效果。下面我们就在vue中使用两种方法来实现数字动态滚动效果。

2 数字动态滚动

2.1 计时器实现

先上效果：

  以上效果是点击按钮加载金额，实际情况是页面加载的时候就需要。这个时候我们需要在页面加载的时候执行用该方法。