Vue v-for循环中如何动态拼接访问对象p+索引格式的属性？

该需求完全可实现，无需额外依赖Vue的特殊语法，基于JavaScript原生对象访问规则即可完成。

• 语法注意点：对象的点语法（.）仅支持访问静态固定的属性名，要动态拼接属性名访问，必须使用方括号（[]）访问语法，方括号内支持任意合法JS表达式，可以直接拼接你需要的p+序号格式属性名。
• 下标适配注意：v-for="index in attrLength"遍历数值时，index默认从1开始计数，和你需要的p1/p2后缀序号规则匹配；如果你的projects是常规0下标的数组，取对应项目对象时需要将index减1来匹配数组下标。

写法1：保留原有循环结构 #

不需要额外声明const project = projects[index]变量，直接在插值表达式中完成取值即可：

<p v-for="index in attrLength" :key="index" class="text-3xl">
  {{ projects[index - 1][`p${index}`] }}
</p>

如果你的projects数组下标从1开始（非标准数组写法），直接把index - 1改成index即可。上述代码在index为1时实际访问projects[0].p1，index为2时访问projects[1].p2，和预期效果完全一致。

写法2：直接拿到project对象（更推荐） #

如果你希望循环内直接拿到project对象、避免手动计算数组下标，可以直接遍历projects数组的前attrLength项，逻辑更直观不易出错：

<p v-for="(project, idx) in projects.slice(0, attrLength)" :key="idx" class="text-3xl">
  {{ project[`p${idx + 1}`] }}
</p>

这种写法里idx是数组下标（从0开始），拼接属性名时加1即可得到p1/p2格式的属性名。

内容的提问来源于stack exchange，提问作者shook_one