列表渲染 v-for：从零掌握 Uniapp 开发

基于数组的循环

v-for 指令可以基于数组来渲染一个列表。语法为 v-for="item in items"，其中 items 是源数据数组，item 是循环中当前项的别名。例如：

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橘子']
    }
  }
}
</script>

在上面的代码中，items 是一个包含三个水果名称的数组。v-for 指令将遍历这个数组，并为每个水果创建一个 <li> 元素。最终渲染出来的 HTML 代码如下：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

基于对象的循环

v-for 指令也可以基于对象来渲染一个列表。语法为 v-for="(key, value) in object"，其中 object 是源数据对象，key 是对象的键，value 是对象的对应值。例如：

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

<script>
export default {
  data() {
    return {
      object: {
        name: 'John Doe',
        age: 30,
        city: 'New York'
      }
    }
  }
}
</script>

在上面的代码中，object 是一个包含三个键值对的对象。v-for 指令将遍历这个对象，并为每个键值对创建一个 <li> 元素。最终渲染出来的 HTML 代码如下：

<ul>
  <li>name: John Doe</li>
  <li>age: 30</li>
  <li>city: New York</li>
</ul>

循环中的别名

在 v-for 指令中，我们可以使用 item 和 index 别名来访问循环中的当前项和当前索引。例如：

<template>
  <ul>
    <li v-for="item, index in items">{{ index + 1 }}: {{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橘子']
    }
  }
}
</script>

在上面的代码中，我们使用 index 别名来获取当前项的索引，并使用 item 别名来获取当前项的值。最终渲染出来的 HTML 代码如下：

<ul>
  <li>1: 苹果</li>
  <li>2: 香蕉</li>
  <li>3: 橘子</li>
</ul>

总结

v-for 指令是一个非常强大的指令，可以用来渲染各种各样的列表。通过灵活使用 v-for 指令，我们可以轻松实现复杂的数据绑定和列表渲染功能。