uniapp 循环如何使用

在uniapp中如何使用循环？比如我想用v-for渲染列表数据，但不知道具体的语法和注意事项。能否给个示例代码说明如何循环数组对象，并绑定key值？另外，循环过程中如何获取当前项的索引？

2 回复

在uni-app中，使用v-for进行循环。例如：

<view v-for="(item, index) in list" :key="index">
  {{ item.name }}
</view>

其中list是数据数组，item是当前项，index是索引。记得加:key提高性能。


在 UniApp 中，循环主要通过 v-for 指令实现，类似于 Vue.js 的语法。以下是具体用法和示例：

基本语法

<view v-for="(item, index) in list" :key="index">
  {{ index }}: {{ item }}
</view>
  • list：要遍历的数组或对象。
  • item：当前遍历的元素。
  • index：当前索引（可选）。
  • :key：唯一标识，提升渲染性能（必填，建议用 id 或 index）。

示例代码

  1. 遍历数组：
<template>
  <view>
    <view v-for="(user, i) in userList" :key="user.id">
      {{ i + 1 }}. 姓名：{{ user.name }}，年龄：{{ user.age }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: "张三", age: 20 },
        { id: 2, name: "李四", age: 22 }
      ]
    };
  }
};
</script>
  1. 遍历对象：
<view v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</view>

注意事项

  • 使用 v-for 时务必绑定 :key，避免渲染问题。
  • 可嵌套其他指令（如 v-if），但建议分开使用以避免性能问题。
  • 循环对象时，顺序按 Object.keys() 的结果遍历。

通过以上方法，可以灵活实现列表渲染、动态数据展示等功能。

回到顶部