计算机网络/计算机科学与应用/系统/运维/开发

wx:for 列表渲染/遍历对象/遍历数组

wx:for 列表渲染:

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

    在组件上使用wx:for 属性绑定一个数组或对象,即可使用每一项数据重复渲染当前组件

    每项变量名默认为item ,下标变量默认为index


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

    1、字符串 代表需要遍历的array中item的某个属性

    2、保留关键字*this代表在for循环中的item本身


注意:

    如果不加wx:key 会报一个warning 

    给wx:key添加属性值的时候,不需要使用双大括号语法,直接使用遍历的array中的item的某个属性


image.png



如果需要对默认的变量名和下标进行修改,使用wx:for-item 和 wx:for-index

    使用wx:for-item 指定数组当前元素的变量名

    使用wx:for-index 可以指定当前数组当前下标变量名


将wx:for 在<block />标签上,以渲染一个包含多个节点的结构块

    <block /> 并不是一个组件,仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

    <block /> 标签在wxml中可以用于组织代码结构,支持列表渲染 ,条件渲染


// 数组

<view wx:for="{{fruitList}}" wx:key="id" wx:for-item="fruitItem" wx:for-index="i">
    {{fruitItem.name}}  --- {{ i }}
</view>


// 对象

<view wx:for="{{obj}}" wx:key="key" wx:for-item="value" wx:for-index="key">
    {{value}}  --- {{ key }}
</view>


世上最好的保鲜就是不断进步,让自己成为一个更好和更值得爱的人。

评论

^