vue3 ts 实现一个循环,点击item后得到item的index
时间: 2024-04-29 19:23:43 浏览: 13
以下是一个实现循环并通过点击获取索引的示例代码:
```
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index" @click="getItemIndex(index)">
{{ item }}
</li>
</ul>
<p>当前点击的item的索引是: {{ clickedIndex }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'LoopWithClick',
data() {
return {
items: ['item1', 'item2', 'item3', 'item4'],
clickedIndex: -1,
};
},
methods: {
getItemIndex(index: number) {
this.clickedIndex = index;
},
},
});
</script>
```
在模板中,我们使用 `v-for` 指令遍历 `items` 数组,为每个元素绑定 `click` 事件,并在事件处理函数中调用 `getItemIndex` 方法,将当前点击的元素的索引传递给该方法。
在组件的 `data` 选项中,我们定义了 `items` 数组和 `clickedIndex` 属性,分别用于存储循环的数据和当前点击的元素的索引。
在组件的 `methods` 选项中,我们定义了 `getItemIndex` 方法,该方法接收一个索引值,并将其存储到 `clickedIndex` 属性中。
最后,在模板中,我们使用插值语法显示当前点击的元素的索引值。