6 Mini Program Template Syntax – List Rendering

Hits: 0

wx:for

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" 
   }]

wx:key="id"

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

list:[1,2,3,4,5]

wx:key="*this"

Code example:

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

Page({
  data: {
      array: [{
          id:0,
          message: 'foo',
          }, {
          id:1,
          message: 'bar'
      }]
  }
})

Notice

  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

block

Function: Rendering a block containing multiple nodes will not eventually become a real DOM element
Features:
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>
</block>

You may also like...

Leave a Reply

Your email address will not be published.