简单的数据相加效果

html

<div>{{gradeValue}}div>
1

js

data () {
	return {
		gradeValue: '50'
	}
},
created () {
	this.afterSuccess('100')
},
methods: {
	afterSuccess (value) {
		// value 要加到的值
		let that = this
		let current = 0
		let start = Number(that.gradeValue) // 相加的初始值
		let step = parseInt((value - that.gradeValue) / 80) // 每次加的数量(80次加完)
		step = step < 1 ? 1 : step
		
		let t = setInterval(() => {
		  if (value - that.gradeValue > 0) {
		    start += step
		    if (start >= value) {
		    	start = value
		      	clearInterval(t)
		    }
		  }
		  current = start
		  that.gradeValue = current.toString()
		}, 10)
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31