Vue项目中v-for循环渲染条目如何绑定对应的唯一跳转锚点链接

云上老周

2026-10-6

解决方案

方案1（推荐）：调整数据结构，将链接关联到对应博客对象

你可以直接给blogs数组的每个元素新增url字段，让每一条博客数据自带对应的跳转链接，遍历的时候直接读取即可：

<!-- 遍历输出代码 -->
<li v-for='blog in blogs' :key="blog.id">
     <a :href="blog.url">{{ blog.name }}</a>
</li>

<!-- 对应的blogs数组结构示例 -->
<script>
const blogs = [
  {
    id: 1,
    name: '第一篇博客',
    url: 'https://www.google.com'
  },
  {
    id: 2,
    name: '第二篇博客',
    url: 'https://www.youtube.com'
  },
  {
    id: 3,
    name: '第三篇博客',
    url: 'https://www.etc.com'
  }
]
</script>

该方案耦合度最低，后续新增/删除博客时仅需修改blogs数组即可，无需额外维护其他变量。

方案2：通过索引匹配独立的链接数组

如果你确实无法修改原blogs数组的结构，可以单独维护一个和blogs顺序完全一致的链接数组，利用v-for的索引参数匹配对应链接：

<li v-for='(blog, index) in blogs' :key="blog.id">
     <a :href="blogUrls[index]">{{ blog.name }}</a>
</li>

<script>
// 注意blogUrls的元素顺序必须和blogs完全对应
const blogUrls = [
  'https://www.google.com',
  'https://www.youtube.com',
  'https://www.etc.com'
]
</script>