小程序33-列表渲染

列表渲染 就是指通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上

在组件上使用 wx:for 属性绑定一个数组或对象,既可使用每一项数据重复渲染当前组件
每一项的变量名默认为item,下标变量名默认为index

在使用 wx:for进行遍历的时候,建议加上wx:key 属性,wx:key的值以两种形式提供:

  1. 字符串: 代表需要遍历的array 中 item的某个属性,该属性的值需要是列表中唯一的字符串或数字,且不能动态改变
  2. 保留关键字*this 代表在for 循环中的item 本身,当item 本身是一个唯一的字符串或者数字时可以使用

注意事项:

  1. 如果不加wx:key,会报一个warning,如果明确知道该列表是静态,即以后数据不会改变,或者不必关注其顺序,可以选择忽略。
  2. 在给 wx:key 添加属性值的时候,不需要使用双大括号语法,直接使用遍历的array中item的某个属性
html 复制代码
<!--pages/profile/profile.wxml-->

<!-- 如果需要进行列表渲染,需要使用 wx:for属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是item -->
<!-- 每一项下标的变量名默认是 index -->
<view wx:for="{{ numList }}">{{ item }} - {{ index }}</view>

<!-- 如果渲染的是数组,item:数组的每一项,index:下标 -->
<view wx:for="{{ obj }}">{{ item }} - {{ index }}</view>

<!-- wx: key 提升性能 -->
<!-- wx: key 属性值有两种添加方式 -->
<!-- 1.字符串,需要遍历数组item的某个属性,要求该属性是列表中唯一的字符串或者数字,不能进行动态改变 -->
<!-- 2.保留关键字 *item 代表的是item本身,item本身是唯一的字符串或者数字 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
javascript 复制代码
// pages/profile/profile.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    numList: [1,2,3],
    fruitList: [
      { id: 1, name: '🍎' },
      { id: 2, name: '🍋' },
      { id: 3, name: '🍅' }
    ],
    obj: {
      name: 'tom',
      age: 10
    }
  }


})
相关推荐
qq_4116719817 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W6 小时前
微信小程序实现路由拦截的方法
前端
CC同学呀7 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
某公司摸鱼前端7 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app