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

如果您不想使用`v-for`指令来循环渲染DOM元素，而是想手动在模板中创建多个具有相同引用名称的DOM元素，您可以使用`ref`和`$refs`来访问它们。例如，在模板中，您可以这样创建多个具有相同引用名称的DOM元素：

<template>
  <div>
    <div ref="myDiv"></div>
    <div ref="myDiv"></div>
    <div ref="myDiv"></div>
  </div>
</template>

在这个示例中，我们手动创建了三个具有相同引用名称`myDiv`的`<div>`元素。

现在，您可以在组件中使用`this.$refs`来访问所有具有`myDiv`引用的DOM元素，如下所示：

export default {
  mounted() {
    // 访问所有myDiv引用的DOM元素
    const divs = this.$refs.myDiv;
    console.log(divs); // 输出一个包含所有元素的数组
  }
};

在这个示例中，我们在组件挂载后使用`this.$refs.myDiv`来访问所有具有`myDiv`引用的DOM元素，并将它们存储在`divs`变量中。这将返回一个包含所有DOM元素的数组，您可以使用索引来访问其中的元素。

相关问题

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

在 Vue3 中，可以使用 `ref` 的新特性来获取多个同名的 DOM 元素，而不需要使用 `v-for`。

具体做法是：在 `setup()` 函数中使用 `ref` 创建一个空数组，并使用 `ref` 创建一个函数，将其作为 `ref` 的参数传入，然后在函数中使用 `querySelectorAll` 方法获取到所有同名的 DOM 元素，并使用 `Array.from()` 将其转换为数组，最后将数组存储到之前创建的空数组中。

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

<template>
  <div>
    <input class="my-input" />
    <input class="my-input" />
    <input class="my-input" />
  </div>
</template>

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

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

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

    onMounted(() => {
      const elements = document.querySelectorAll('.my-input');
      inputRefs.value = Array.from(elements);
    })

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

    return {
      setInputRefs,
      inputRefs,
    };
  },
};
</script>

这里我们在 `setup()` 函数中使用 `querySelectorAll` 获取到所有同名的 `input` 元素，并使用 `Array.from()` 将其转换为数组，然后将其存储到 `inputRefs` 中。最后，我们就可以在 `inputRefs` 中访问所有的 `input` 元素的 `ref` 了。

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 元素。

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