vue3 ref获取多个同名dom
时间: 2023-06-22 11:20:02 浏览: 78
在Vue 3中,您可以使用`ref`和`v-for`指令来获取多个同名DOM元素。首先,您需要在模板中使用`v-for`来循环渲染DOM元素,并使用`ref`指令来为每个元素创建一个引用,如下所示:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index" ref="myDiv"></div>
</div>
</template>
```
在这个示例中,我们使用`v-for`循环遍历`items`数组,并为每个元素创建一个`<div>`元素,并将每个元素的索引作为`key`属性。我们还为每个元素创建了一个名为`myDiv`的引用。
现在,我们可以在组件中使用`this.$refs`来访问所有具有`myDiv`引用的DOM元素,如下所示:
```javascript
export default {
data() {
return {
items: [1, 2, 3]
};
},
mounted() {
// 访问所有myDiv引用的DOM元素
const divs = this.$refs.myDiv;
console.log(divs); // 输出一个包含所有元素的数组
}
};
```
在这个示例中,我们在组件挂载后使用`this.$refs.myDiv`来访问所有具有`myDiv`引用的DOM元素,并将它们存储在`divs`变量中。这将返回一个包含所有DOM元素的数组,您可以使用索引来访问其中的元素。