vue-countup-v2如何设置开始值与结束值相同时不触发动画效果
可以通过设置 startVal 和 endVal 相同时的 duration 为 0 来实现不触发动画效果,示例代码如下:
<template>
<div>
<vue-countup-v2 :start-val="count" :end-val="count" :duration="duration"></vue-countup-v2>
<button @click="count++">增加</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
duration: 1000
}
}
}
</script>
在上述代码中,当 startVal 和 endVal 相同时,duration 设置为 0,此时不会触发动画效果。当点击增加按钮时,count 值会加一,此时会触发重新渲染,从而更新 startVal 和 endVal 的值,从而触发动画效果。
原文地址: https://www.cveoy.top/t/topic/38o 著作权归作者所有。请勿转载和采集!