vue中,想要实现几个数字从0缓慢增长到目标值的动态特效,我采用了vue指令实现。
Vue.directive('countRunning', {
bind(el, binding, vnode, oldVnode) {
var timer = null;
const targetDomCount = el.getAttribute('data-target'); //data-target为目标值
let nowCount = parseInt(el.innerHTML); //当前页面显示值
timer = setInterval(() => {
if (nowCount < targetDomCount) {
nowCount++;
} else {
clearInterval(timer);
timer = null;
}
el.innerHTML = nowCount;
}, 80);
}
})
<p class="countRunning" v-countRunning :data-target='item.count'>0</p>