uniapp v-for的使用方法

在uniapp中使用v-for循环渲染列表时，如何正确绑定key值？我在循环遍历数组时遇到渲染错乱的问题，尝试过使用index作为key但数据更新后顺序会乱。另外v-for能否直接遍历对象？如果需要同时获取下标和值该怎么写？求具体用法示例和注意事项。

2 回复

uniapp中v-for用于循环渲染列表。写法：<view v-for="(item, index) in list" :key="index">{{item}}</view>。记得加:key提高性能，可用item或index作为key值。


在 UniApp 中，v-for 是 Vue.js 的指令，用于循环渲染列表数据。它基于数据源动态生成元素，语法与 Vue 相同。以下是使用方法和示例：

基本语法

<view v-for="(item, index) in list" :key="index">
  {{ index }}: {{ item.name }}
</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, index) in object" :key="key">
  {{ index }}: {{ key }} - {{ value }}
</view>

注意事项

  • 始终使用 :key 提升渲染性能，避免使用随机值。
  • 可结合 v-if 使用，但 v-for 优先级更高，建议先用计算属性过滤数据。
  • 支持遍历数字：v-for="n in 5" 生成 1 到 5 的序列。

通过 v-for 可高效处理动态列表，如表单选项、商品列表等。

回到顶部