vue3+ts获取dom

Type-云

于 2023-05-19 21:51:17 发布

阅读量556

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66810621/article/details/130774577

版权

该文介绍了在Vue中如何利用ref来绑定和操作DOM元素，包括单个元素的引用以及通过循环创建多个元素并存入数组进行管理。在onMounted生命周期钩子中获取元素宽度，并使用nextTick确保DOM更新后执行相关操作。

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

<script setup lang="ts">
import { ref, onMounted } from "vue";

        // 获取到食物的dom
        const myFood = ref<HTMLElement>();

        onMounted(() => {
            console.dir(myFood.value?.clientWidth);
        })

</script>

通过ref绑定dom，使用domname.value即可调用dom

获取多个dom

<template>
  <div>获取多个DOM元素</div>
  <ul>
    <li v-for="(item, index) in arr" :key="index" :ref="setRef">
      {{ item }}
    </li>
  </ul>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const arr = ref([1, 2, 3]);

    // 存储dom数组
    const myRef = ref([]);

    const setRef = (el) => {
      myRef.value.push(el);
    };

    nextTick(() => {
      console.dir(myRef.value);
    });

    return {
      arr,
      setRef
    };
  }
};
</script>