v-for循环动态 ref ，动态ref获取循环dom元素坐标信息

最新推荐文章于 2023-09-19 15:00:29 发布

HuiRonmantic

最新推荐文章于 2023-09-19 15:00:29 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS Vue技术栈文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_41346436/article/details/126905764

Vue技术栈同时被 2 个专栏收录

67 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

12 篇文章

订阅专栏

本文介绍如何在Vue中使用v-for循环动态设置ref，并通过这些ref获取DOM元素的坐标信息。具体实现包括利用$nextTick确保DOM更新后再获取坐标，以及计算元素相对于视口的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue动态设置和获取ref, v-for循环动态 ref ，动态ref获取循环dom元素坐标信息

data中： dataList { }
循环结构

      <div
                v-for="(item, index) in dataList"
                :key="index"
                class="danXuanItems"
                :style="{
                  width: index + 1 * 33 - index * 1 + 'mm',
                }"
              >
                <div v-for="(item2, index2) in item" :key="index2">
                  <div
                    v-for="(item3, index3) in item2"
                    :key="index3"
                    class="DXchilds"
                  >
                    <div
                      :ref="`danXuanRef${index3 + 1 + index * 5}`"
                      style="margin-bottom: 3px; display: fl

了解本专栏

超级会员免费看