在實際開發過程中會遇到這種情況:
可以看到這裡的數字需要一個滾動的效果
這種效果我們可以通過vue-count-to插件來實現
實現流程:
1.安裝
在控制臺輸入npm install vue-count-to來安裝vue-count-to插件
2. 導入插件並聲明
在需要使用的頁面導入插件,並聲明使用
3.使用插件:
第一種方法:
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data () {
return {
startVal: 0,
endVal: 2017
}
}
}
</script>
第二種方法:
<template>
<countTo :startVal='0' :endVal='2019' :duration='3600'></countTo>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data () {
return {
}
}
}
</script>
下面是可以設置的一些參數,可供參考!
這樣就實現了數字滾動的效果.