vue3 获取dom数组
时间: 2023-11-15 14:05:35 浏览: 29
可以使用 ref 和 v-for 来获取 dom 数组,示例代码如下:
```
<template>
<div>
<div ref="item" v-for="(item, index) in list" :key="index">{{ item }}</div>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
setup() {
const list = ['a', 'b', 'c'];
const items = ref([]);
onMounted(() => {
items.value = Array.from(
document.querySelectorAll('[ref="item"]')
);
});
return {
list,
items,
};
},
};
</script>
```
在 `onMounted` 钩子函数中使用 `document.querySelectorAll` 获取所有 `ref="item"` 的元素,并将其转换为 `Array` 类型,然后将其存储在 `items` 变量中,即可获取 dom 数组。
相关问题
vue3获取dom数组
可以使用 ref 和 v-for 指令来获取 DOM 数组。首先在模板中使用 ref 指令给 DOM 元素添加一个引用名,然后在 Vue 组件中使用 this.$refs 引用这个 DOM 元素,就可以获取到一个类似数组的对象。然后可以使用 v-for 指令来遍历这个对象,获取到具体的 DOM 元素。
示例代码如下:
模板中:
<div v-for="(item, index) in list" :key="index" ref="doms">{{ item }}</div>
Vue 组件中:
mounted() {
const doms = this.$refs.doms; // 获取 DOM 数组
console.log(doms); // 打印类数组对象
for (let i = 0; i < doms.length; i++) {
console.log(doms[i]); // 打印具体 DOM 元素对象
}
}
vue3获取遍历的dom元素
在 Vue3 中,可以使用 `v-for` 指令来遍历数组或对象,并通过 `ref` 函数来获取遍历的 DOM 元素。具体步骤如下:
1. 在模板中使用 `v-for` 指令来遍历数组或对象,并使用 `ref` 函数定义一个引用,例如:
```html
<template>
<div v-for="(item, index) in items" :key="index" :ref="el => itemsRefs[index] = el">
{{ item }}
</div>
</template>
```
在上面的例子中,我们使用 `v-for` 指令来遍历 `items` 数组,并将遍历的每个元素的 DOM 引用存储到 `itemsRefs` 数组中,以便后续使用。
2. 在组件中使用 `reactive` 函数来定义一个响应式对象,例如:
```javascript
import { reactive } from 'vue';
export default {
setup() {
const items = reactive([1, 2, 3]);
const itemsRefs = [];
return {
items,
itemsRefs
};
}
};
```
在上面的例子中,我们使用 `reactive` 函数来定义一个响应式对象 `items`,并定义一个数组 `itemsRefs`,用于存储遍历的每个元素的 DOM 引用。
3. 在需要获取遍历的 DOM 元素的地方,可以通过 `itemsRefs` 数组来获取对应的 DOM 元素,例如:
```javascript
import { onMounted } from 'vue';
export default {
setup(props, { refs }) {
const items = reactive([1, 2, 3]);
const itemsRefs = [];
onMounted(() => {
console.log(itemsRefs); // 输出遍历的每个元素的 DOM 引用
});
return {
items,
itemsRefs
};
}
};
```
在上面的例子中,我们在 `onMounted` 钩子函数中使用 `itemsRefs` 数组来获取遍历的每个元素的 DOM 引用,并进行操作。