vue3 不用v-for ref获取多个同名dom

如果你想在 Vue3 中获取多个同名 DOM 元素，但是不想使用 `v-for`，你可以使用 `ref` 和 `$refs` 来实现。

首先，在需要获取同名 DOM 元素的组件中，使用 `ref` 给每个 DOM 元素添加一个唯一的标识：

<template>
  <div>
    <div ref="myDiv1">My Div 1</div>
    <div ref="myDiv2">My Div 2</div>
    <div ref="myDiv3">My Div 3</div>
  </div>
</template>

然后在组件的 `mounted` 生命周期中，你可以通过 `$refs` 属性获取这些 DOM 元素：

mounted() {
  console.log(this.$refs.myDiv1);
  console.log(this.$refs.myDiv2);
  console.log(this.$refs.myDiv3);
}

注意，`$refs` 是一个对象，属性名是 `ref` 的值，属性值是对应的 DOM 元素。因此，在这个例子中，你可以通过访问 `$refs.myDiv1` 来获取第一个 DIV 元素。

希望这个回答能够帮助到你！

相关问题

vue3不用v-for获取多个同名ref dom元素

在 Vue3 中，可以使用 `ref` 的新特性来获取多个同名的 DOM 元素。具体做法是：在 `ref` 中使用一个函数，并将函数的参数设置为一个数组，然后在函数中使用 `map` 方法将每个元素的 `ref` 存储到一个数组中。

例如，如果要获取多个同名的 `input` 元素，可以这样做：

<template>
  <div>
    <input v-for="(item, index) in items" :key="index" :ref="setInputRefs" />
  </div>
</template>

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

export default {
  setup() {
    const inputRefs = ref([]);

    const setInputRefs = (el) => {
      if (el) {
        inputRefs.value.push(el);
      }
    };

    // 现在你可以在 inputRefs 中访问所有的 input 元素的 ref 了
    console.log(inputRefs.value);

    return {
      setInputRefs,
      inputRefs,
      items: [1, 2, 3],
    };
  },
};
</script>

这里我们定义了一个 `inputRefs` 的 `ref`，并在 `setInputRefs` 函数中将每个 `input` 元素的 `ref` 存储到 `inputRefs` 中。最后，我们就可以在 `inputRefs` 中访问所有的 `input` 元素的 `ref` 了。

vue3不用v-for获取多个同名dom元素

在 Vue3 中，可以使用 `ref` 的新特性来获取多个同名的 DOM 元素。具体做法是：在 `ref` 中使用一个函数，并将函数的参数设置为一个数组，然后在函数中使用 `map` 方法将每个元素的 `ref` 存储到一个数组中。

例如，如果要获取多个同名的 `div` 元素，可以这样做：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index" :ref="setDivRefs" />
  </div>
</template>

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

export default {
  setup() {
    const divRefs = ref([]);

    const setDivRefs = (el) => {
      if (el) {
        divRefs.value.push(el);
      }
    };

    // 现在你可以在 divRefs 中访问所有的 div 元素的 ref 了
    console.log(divRefs.value);

    return {
      setDivRefs,
      divRefs,
      items: [1, 2, 3],
    };
  },
};
</script>

这里我们定义了一个 `divRefs` 的 `ref`，并在 `setDivRefs` 函数中将每个 `div` 元素的 `ref` 存储到 `divRefs` 中。最后，我们就可以在 `divRefs` 中访问所有的 `div` 元素的 `ref` 了。