vue3 循环DOM得到索引
时间: 2023-08-07 09:41:10 浏览: 56
在 Vue3 中,可以使用内置的 `v-for` 指令来循环渲染 DOM,并且可以通过 `v-for` 的第二个参数 `$index` 来获取当前循环的索引。例如:
```html
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }}: {{ item.name }}
</li>
</ul>
```
在上面的例子中,`{{ index }}` 就是当前循环的索引。注意,索引从 0 开始计数。
相关问题
vue3 js循环DOM得到索引
在 Vue3 中,可以使用 `v-for` 指令来循环渲染 DOM,并且可以通过 `v-for` 的第二个参数来获取当前循环的索引。同时,在循环过程中,可以使用 `Array.prototype.forEach()` 或者 `Array.prototype.map()` 方法来对数组进行遍历操作。以下是两种方法的示例代码:
使用 `v-for` 和 `$index`:
```html
<template>
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ index }}: {{ item.name }}
</li>
</ul>
</template>
```
使用 `Array.prototype.forEach()`:
```html
<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()`:
```html
<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()` 方法对它们进行了遍历操作。
vue3 for循环如何点击获取当前dom元素
在 Vue3 中,你可以使用 `ref` 来获取当前 DOM 元素,并使用 `v-for` 遍历数据。以下是一个示例:
```
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" @click="handleClick(index)" :ref="`item-${index}`">{{ item }}</li>
</ul>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const list = ref(['apple', 'banana', 'orange']);
const handleClick = (index) => {
const el = document.querySelector(`[ref="item-${index}"]`);
console.log(el); // 当前点击的 DOM 元素
};
return {
list,
handleClick,
};
},
};
</script>
```
在模板中使用 `v-for` 遍历数据,并将每个 DOM 元素的 `ref` 属性设置为 `item-${index}`,其中 `index` 是当前元素在数组中的索引。然后,在点击事件中使用 `document.querySelector` 方法来获取当前点击的 DOM 元素。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)