---

简介

  在 Vue.js 的世界里，当我们需要处理重复性的结构并依据数据动态渲染时，v-for 指令就成了不可或缺的工具，它赋予开发者简洁且强大的能力，轻松应对各种列表渲染场景。

一、基础数组迭代

  v-for 指令运用一种独特且易于理解的语法 —— site in sites 形式，其中 sites 代表源数据所在的数组，而 site 则是在循环过程中对每个数组元素的便捷别名。这就好比给数组中的每个元素都取了个临时的小名，方便我们在模板中引用。
  例如，当我们想要渲染一个网站名称列表时，代码如下：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

  在这个示例中，Vue.js 会自动遍历 sites 数组，针对每一个元素，取出其中的 name 属性，并将其渲染在对应的 < li> 标签内，最终呈现在页面上的就是一个有序的网站名称列表。
不仅如此，v-for 在模板运用上相当灵活，我们还可以结合 标签来实现更复杂的布局需求。就像下面这样：

<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>

  这里， 标签作为一个不可见的容器，帮助我们组织多个需要重复渲染的元素结构，每一次循环都会完整地渲染其内部包含的 < li> 标签，使得列表项呈现出 “名称 + 分隔线” 的样式，丰富了展示效果。

二、对象属性迭代

  除了数组，v-for 指令在处理对象时同样游刃有余。它能够精准地按照对象的属性来迭代数据，为我们提取和展示对象中的信息提供了极大便利。
  假设有一个包含网站相关信息的对象：

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

  在上述代码中，v-for 会依次遍历 object 对象的属性值，将每个值单独渲染在 < li> 标签内，如此一来，页面上就会按顺序展示出对象的各个属性值，让信息呈现更加直观。
  而 Vue.js 考虑得更为周全，它允许我们进一步获取属性的键名以及当前迭代的索引。只需在 v-for 表达式中稍作调整：

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

  此时，在循环过程中，不仅能获取到属性值 value，还能同步得到对应的键名 key，并按照 “键名：值” 的格式展示，这对于详细展示对象结构和数据关联尤为有用。
若再添加一个参数，还能获取到当前迭代的索引：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

  如此，呈现出来的列表项就变成了带有索引编号的格式，像 “0. name : 菜鸟教程”，这种方式在需要对列表项进行排序、标注序号或者根据索引执行特定逻辑时，显得格外便捷。

三、整数循环

  令人惊喜的是，v-for 的能力还不止于此，它甚至可以直接对整数进行循环操作，这在一些需要生成固定数量的重复结构场景下非常实用。
  比如，我们想要快速生成一个从 1 到 10 的数字列表：

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

  这里，v-for 会自动将整数 10 视为一个从 1 开始，到 10 结束（包含 10）的序列，逐一将数字渲染在 < li> 标签内，轻松实现了数字列表的生成，无需手动构建数组，大大简化了代码逻辑。
  但在使用 v-for 时，尤其是在处理大型数据列表或者复杂对象迭代时，开发者还需留意性能问题。因为每一次 v-for 循环都会创建对应的 DOM 元素，若数据量过大，可能导致页面加载缓慢、卡顿等现象。此时，可以结合 Vue.js 的一些优化技巧，如使用 key 属性来帮助 Vue 精准识别每个列表项的身份，优化 DOM 更新效率，确保在享受 v-for 带来的便捷同时，维持页面的流畅性能。