vue3+ts获取dom

<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>