項目場景：

提示：這里簡述項目相關背景：

在有些時候比如在做C端項目的時候，頁面一般需要一些炫酷效果，比如數字會從小值自動加到數據返回的值

?

---

分析：

提示：這里填寫問題的分析：

可以使用自定義屬性，讓自定義屬性的值自動從小值一直自動加到與后端返回的值一樣大，

這里需要注意一點，需要在節點掛載完成后才可以，不然，給節點加屬性的時候找不到哪個節點，

另外也要拿到后端返回的值，因為自動加到的值與后端返回的一樣才行，

---

解決方案：

提示：這里填寫該問題的具體解決方案：

<template><div ref="observerElement" class="observed-element flexEv bannerBg padTB100 padLR65 colorW"><div class="flex" v-for="item in props.bannerInfo"><div class="borderR paddingR20 flexC"><i :class="item.icon" class="iconfont fontS40 fontW4 colorW hoverS"></i></div><div class="paddingL20"><div ref="numRef" class="fontS26 fontW6 marginB10 number inLb":data-target="item.textTop"></div> <div class="fontS26 fontW6 inLb">+</div><div class="fontS18 fontW5">{{item.textBottom}}</div></div></div></div>
</template><script lang="ts" setup>
import {reactive,toRefs,ref,Ref,PropType,onMounted,onBeforeUnmount,
} from "vue"
const props=defineProps({// bannerInfo:{type:Array},
})
// 自動將數值加到會后那個值的方法
const changeNum=()=>{// 獲取元素const numbers = document.querySelectorAll('.number')console.log("",numbers)// 獲取所有的dom,querySelectorAll為為數組numbers.forEach(item => {item.textContent = "0";const upDateNumber = () => {// 獲取每個類名為number的data-target,即獲取最大值 const target = Number(item.getAttribute('data-target'))// 獲取當前div的數值const d = Number(item.textContent)// 設置數據增加的值，可以通過target除的數值確定怎么加數值的快慢const increment = target / 100// 當數字小于最大值時，執行下面的操作if (d < target) {// 向上取整item.textContent = `${Math.ceil(d + increment)}`// 1ms重新調用，不然它會在第一次運行完就結束setTimeout(upDateNumber, 1000)} else {item.textContent = target+"";//textContent的值是 字符串 所以加個空字符}}upDateNumber()})
}
// 在節點掛載完成后 再執行
onMounted(()=>{console.log()changeNum()
})onBeforeUnmount(()=>{console.log()
})
const emit =defineEmits([""
])</script><style lang="less" scoped>
.bannerBg{background-color:#1d7b51 ;
}
.borderR{border-right: 1px solid #ffffff;
}
</style>