uniapp 微信小程序 v-for 的使用方法

在uniapp开发微信小程序时，如何使用v-for循环渲染列表数据？我在模板中写了<view v-for="(item, index) in list" :key="index">{{item.name}}</view>，但列表没有正确显示。请问正确的语法是什么？是否需要在小程序的配置文件中进行额外设置？另外，v-for的key值除了index还可以用什么？

2 回复

在uniapp中，使用v-for循环数据，语法与Vue相同：

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

注意：必须添加:key提高性能，微信小程序中v-for支持循环数组和对象。


在 UniApp 中使用 v-for 渲染列表的方法与 Vue.js 相同，适用于微信小程序开发。以下是具体用法和注意事项：

基本语法

<template>
  <view>
    <!-- 遍历数组 -->
    <view v-for="(item, index) in list" :key="index">
      {{ item.name }} - 索引: {{ index }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '项目A' },
        { name: '项目B' },
        { name: '项目C' }
      ]
    }
  }
}
</script>

关键要点

  1. 必须指定 :key
    小程序要求每个循环项有唯一 key（如 id 或 index），用于优化渲染性能。

  2. 遍历对象（不推荐在小程序中使用）

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

  3. 嵌套循环

    <view v-for="(group, gIndex) in nestedList" :key="gIndex">
  <text>{{ group.category }}</text>
  <view v-for="(item, iIndex) in group.items" :key="iIndex">
    {{ item.name }}
  </view>
</view>

注意事项

  • 避免在 v-for 中使用复杂表达式，建议先在 computed 中处理数据
  • 小程序中部分组件（如 <swiper-item>）需手动设置 v-for
  • 若数据动态更新，需确保 key 值稳定性

通过以上方式可高效实现列表渲染，同时符合小程序规范要求。

回到顶部