Vue3+ts （nuxt3）使用ref获取dom元素（单个、多个）

最新推荐文章于 2024-03-08 11:21:24 发布

l煎饼果子

最新推荐文章于 2024-03-08 11:21:24 发布

阅读量1.5k

点赞数 1

分类专栏： Vue3.js 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_64130892/article/details/131610470

版权

Vue3.js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

直接用字符串的形式即可，不管是多个还是单个，多个会自动放到一个数组里面，而且还能被watch监视。

注意需要在挂载后才能拿到这些数据。

<template>
    <div ref="out">
        <div class="item" v-for="k in xxxx" :key="i" ref="itemRefs">{{ k }}</div>
    </div>
</template>
<script setup lang='ts'>
/**单个ref */
const out = ref<Element | null>(null)
/**ref数组 */
const itemRefs = ref<Element[]>([])
watch(itemRefs, (newVal) => {
    console.log('ref数组更新啦', newVal);
}, { deep: true })
onMounted(() => {
    console.log(out.value ,itemRefs.value);
})
</script>