Vue 模板语法怎么在循环中获取当前项的索引值并使用

风磊小哥_5846

风磊小哥_5846

2026-10-19

380人浏览

原创

v-for 中可通过第二个参数获取索引:数组用 (item, index),对象用 (value, key, index);索引从 0 开始,推荐用唯一 id 而非 index 作 key,事件中可直接传入 index 定位操作。

vue 模板语法怎么在循环中获取当前项的索引值并使用

在 Vue 模板中使用 v-for 循环时,可以通过第二个参数获取当前项的索引值,语法为 (item, index) 或 (value, key, index)(对象遍历时)。

基础用法:数组遍历中获取索引

对数组使用 v-for 时,索引是可选的第二个参数,从 0 开始计数:


  • {{ index + 1 }}. {{ todo.text }}

注意:务必为每个元素设置唯一的 :key。推荐优先使用数据本身的唯一标识(如 todo.id),而非仅用 index,避免列表动态更新时出现渲染异常。

对象遍历中同时获取键、值和索引

遍历对象时,v-for 支持三个参数:(value, key, index):

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习