在 Vue 中，v-for 是一个常用的指令，用于 循环 渲染数组或对象数据。你可以通过它来动态展示一个数据列表，常用于渲染表格、列表等多种数据展示场景。

1. 基本用法：循环数组

v-for 可以遍历一个数组，并生成一个新的 DOM 元素。

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  });
</script>

解析

  • v-for="item in items"：表示循环遍历 items 数组，每次迭代将 item 赋值为数组中的一个元素。
  • :key="item.id"：每个循环项都应该有一个唯一的 key 值，Vue 用它来跟踪每个元素的变化，从而高效地更新 DOM。key 通常使用元素的唯一标识符。
  • {{ item.name }}：在每个 <li> 标签中展示 item 对象的 name 属性。

2. 循环数字范围：v-for 与 index

v-for 还可以用来生成一个数字范围，在循环过程中，我们可以访问当前的索引（index）。

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: ['Apple', 'Banana', 'Cherry']
    }
  });
</script>

解析

  • v-for="(item, index) in items"：index 是循环的当前索引值，从 0 开始。
  • {{ index + 1 }}：通过索引来显示当前项目的序号。

3. 循环对象

v-for 也可以用于遍历一个对象的属性。

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

<script>
  new Vue({
    el: '#app',
    data: {
      person: {
        name: 'John',
        age: 30,
        job: 'Developer'
      }
    }
  });
</script>

解析

  • v-for="(value, key) in person"：这里 person 是一个对象，key 是属性名，value 是属性值。
  • {{ key }}: {{ value }}：显示属性名和对应的值。

4. 使用 v-for 结合组件

在 Vue 中，你可以用 v-for 来循环渲染组件。

<div id="app">
  <product-item v-for="product in products" :key="product.id" :product="product"></product-item>
</div>

<script>
  Vue.component('product-item', {
    props: ['product'],
    template: `<div>{{ product.name }} - ${{ product.price }}</div>`
  });

  new Vue({
    el: '#app',
    data: {
      products: [
        { id: 1, name: 'Laptop', price: 1000 },
        { id: 2, name: 'Smartphone', price: 500 },
        { id: 3, name: 'Headphones', price: 100 }
      ]
    }
  });
</script>

解析

  • v-for="product in products"：循环 products 数组，渲染 product-item 组件。
  • :key="product.id"：每个组件都需要唯一的 key 值。
  • :product="product"：将当前的 product 对象作为属性传递给子组件。

5. 在 v-for 中使用 index

有时你可能需要在 v-for 循环中访问当前项的索引（index），这时你可以使用 (item, index) 的语法。

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ index + 1 }}: {{ item }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: ['Apple', 'Banana', 'Cherry']
    }
  });
</script>

解析

  • v-for="(item, index) in items"：这里可以访问 index，即每个元素的索引值，从 0 开始。
  • {{ index + 1 }}: {{ item }}：通过 index 展示元素的序号。

6. 使用 v-for 遍历数字范围

你可以通过 v-for 在 Vue 中生成一个数字范围，比如生成 1 到 10 的数字列表。

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

<script>
  new Vue({
    el: '#app',
  });
</script>

解析

  • v-for="n in 10"：表示循环 1 到 10 的数字。
  • {{ n }}：展示每个数字。

总结

  • v-for 是 Vue 中用于循环渲染数据的核心指令，可以循环数组、对象，甚至生成数字范围。
  • 使用 v-for 时，务必提供唯一的 key 值，以提高渲染性能。
  • 可以通过 index 来访问当前循环的索引，用于动态展示数据。

掌握 v-for 的用法，可以大大提升你在 Vue 中渲染复杂数据结构的能力。