conditional rendering

wx:if

In the framework, use wx:if = "" to determine whether the code block needs to be rendered:

<view wx:if="{{condition}}"> True </view>

You can also add an else block with wx:elif and wx:else:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

wx:if vs hidden

Because the template in wx:if may also contain data binding, when the condition value of wx:if is switched, the framework has a local rendering process, because it will ensure that the condition block is destroyed or re rendered during switching.

At the same time, wx:if is also inert. If the initial rendering condition is false, the framework does nothing and starts local rendering when the condition becomes true for the first time.

In contrast, hidden is much simpler. Components will always be rendered, just simple control of display and hiding.

In general, wx:if has a higher switching cost and hidden has a higher initial rendering cost. Therefore, hidden is better if frequent switching is required, and wx:if is better if the conditions are unlikely to change at runtime.

Using wx:if and component to set hidden attribute can hide and display elements. What is the difference between the two?
1. All built-in components have a hidden attribute: if the value is false, it will be displayed, and if it is true, it will not be displayed

<view hidden="{{isShow}}">test hidden</view>

2. If the label rendering is controlled by hidden, it will actually be rendered whether the content is displayed or not
3. If you want to frequently control the display or hiding of components, hidden is recommended

List rendering

wx:for

Bind an array with the wx:for control attribute on the component to render the component repeatedly with the data of each item in the array.
Simply put, wx:for is used to loop out arrays, objects, etc

==Note:==
1. When the value of wx:for is a string, the string is parsed into a string array
2. If there is a space between curly braces and quotation marks, it will eventually be parsed into a string

The index variable name of the current item of the default array is index by default, and the variable name of the current item of the array is item by default

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

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

• Use Wx: for item to specify the variable name of the current element of the array,

• Use Wx: for index to specify the variable name of the current index of the array:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for can also be nested, for example, 99 multiplication table

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

wx:key

If the position of the items in the list will change dynamically or new items are added to the list, and you want the items in the list to maintain their own characteristics and status (such as the input in input and the selected state of switch), you need to use wx:key to specify the unique identifier of the items in the list.

To put it simply: when the array content will change dynamically, use wx:key to maintain the characteristics and status of the item; If the key is not used, the whole will be destroyed and recreated, resulting in performance degradation.

The value of wx:key is provided in two forms:

• String: a property of item in the array of the for loop. The value of this property must be a unique string or number in the list and cannot be changed dynamically.

 <input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />

 data: {
 input_data: [
 { id: 1, unique: "javaweb" },
 { id: 2, unique: "Mobile development" },
 { id: 3, unique: "machine learning" },
 { id: 4, unique: "All over" },
 ]
 }

• Reserved keyword * this: the item itself in the for loop. This representation requires the item itself to be a unique string or number.

 <input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" />
 <input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />

 data: {
 numberArray: [1, 2, 3, 4],
 stringArray:['plus','oil','complex','Learn']
 }