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

可以使用 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 数组。

vue 怎么获取数组中的值

在 Vue 中，可以使用 v-for 指令将数组循环渲染到模板中，并使用 v-bind 指令将数组中的值绑定到 DOM 元素的属性上。

例如，有一个数组 items，可以使用 v-for 指令将其循环渲染到模板中：

<div v-for="(item, index) in items" :key="index">
  {{ item }}
</div>

其中，item 表示当前循环到的数组元素，index 表示当前循环到的数组元素的索引。使用 v-bind 指令可以将 item 绑定到 DOM 元素的属性上，例如：

<img v-bind:src="item.imageUrl" />

这样就可以通过数组下标获取数组中的值了。