vue3 js循环DOM得到索引

在 Vue3 中，可以使用 `v-for` 指令来循环渲染 DOM，并且可以通过 `v-for` 的第二个参数来获取当前循环的索引。同时，在循环过程中，可以使用 `Array.prototype.forEach()` 或者 `Array.prototype.map()` 方法来对数组进行遍历操作。以下是两种方法的示例代码：

使用 `v-for` 和 `$index`：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>
</template>

使用 `Array.prototype.forEach()`：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      const lis = this.$el.querySelectorAll('li');
      lis.forEach((li, index) => {
        console.log(index, li.textContent);
      });
    });
  },
};
</script>

使用 `Array.prototype.map()`：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      const lis = this.$el.querySelectorAll('li');
      const texts = Array.from(lis).map((li, index) => {
        return `${index}: ${li.textContent}`;
      });
      console.log(texts);
    });
  },
};
</script>

在上面的例子中，我们通过 `querySelectorAll()` 方法选取了所有的 `<li>` 元素，并且使用 `forEach()` 和 `map()` 方法对它们进行了遍历操作。