6 Mini Program Template Syntax – List Rendering

Hits: 0


The variable name of the item defaults to item wx:for-item The variable name of the current element of the [array]
can be specified The subscript variable name defaults to index wx:for-index The variable name of the current subscript of the array can be specified
wx:key Used to improve the rendering of the array
The value bound to the performance wx:key has the following options

  1. String type, representing the unique property in the loop item such as

list : [{ 
    id : 0, 
    name : "fried rice" 
    id : 1, 
    name : " fried rice" 


  1. The reserved word this, which means the item itself, this must represent a unique string and array.



Code example:

<view wx:for="{{array}}" wx:key="id">  
    {{index}}: {{item.message}} 

  data: {
      array: [{
          message: 'foo',
          }, {
          message: 'bar'


  1. When there is a nested loop of arrays, pay special attention to the names of the following bindings. Do not have the same name
    wx:for-item=”item” wx:for-index=”index”
  2. By default, if we don’t write
    wx:for-item=”item” wx:for-index=”index”
    , the applet will also put the name of the loop item and the name of the index item and index
    with only one layer of loop (wx:for -item=”item” wx:for-index=”index”) can be omitted


Function: Rendering a block containing multiple nodes will not eventually become a real DOM element
1 Placeholder label
2 When writing code, you can see that this label exists
3 The page rendering applet will remove it Lose

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
    <view> {{index}}: </view>
    <view> {{item}} </view>

You may also like...

Leave a Reply

Your email address will not be published.