v-for="(index,$i) in total" :key="$i":style="{left:`${itemWidth*((index-1)%rowItemCount)}px`,top:`${itemHeight*(Math.ceil(index/rowItemCount)-1)}px`}" //total是顯示總數(shù)量
//left、top是元素的x和y坐標(biāo)
//itemWidth、itemHeight是元素的寬高
//index是元素的索引值（從1開始）
//rowItemCount是每行顯示多少個元素//注意：如果需要元素之間有間距，建議不要在這里計算，而是在元素內(nèi)部加padding，或者再包裹一層div，在每個元素內(nèi)部進(jìn)行間距的定位，避免計算行間距太過于復(fù)雜而導(dǎo)致錯亂

總結(jié)

以上是生活随笔為你收集整理的用v-for循环动态定位坐标显示元素，并遍历元素的left和top坐标位置（只需要用到元素的宽高、索引、每行显示数量）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。