[wechat applet] how did the conditional rendering list render work?

Catalog

WXML Template syntax - Conditions apply colours to a drawing

1. wx:if

2. combination Use wx:if

3. hidden

4. wx:if And hidden Comparison of

WXML Template syntax - The list of rendering

🥭1. wx:for

2. Manually specify the index and the variable name of the current item

3. wx:key Use

---

WXML Template syntax - Conditions apply colours to a drawing

1. wx:if

In the applet , Use wx:if="{ { condition}}" To determine whether the code block needs to be rendered ：

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

It can also be used. wx:elif and wx:else To add else Judge ：

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

js：

Page({

data: {
  type:1
},


})

because type The value of is 1, therefore ：

 

for example ：

WXML:

<view wx:if="{
     {type==1}}"> Main tone </view>
<view wx:elif="{
     {type==2}}"> General button </view>
<view wx:else> nothing </view>

<button type="primary" size="mini" wx:if="{
     {type==1}}"> Main tone </button>
<button size="mini" wx:if="{
     {type==2}}"> General button </button>

JS It's the same as up here

effect ：

 

2. combination <block> Use wx:if

If you want to Control the display and hiding of multiple components at one time , You can use one <block></block> Tags wrap multiple components , And in <block> Use on label wx:if Control properties , Examples are as follows ：

<block wx:if="{
      {true}}">
<view>view1</view>
<view>view2</view>
<view>view3</view>
</block>

 

Be careful ： <block> It's not a component , It's just a package container , No rendering in the page .

3. hidden

In the applet , Use it directly hidden="{ { condition }}" It can also control the display and hiding of elements ：

<view hidden="{
       {false}}">hidden</view>

 hidden in   false  Indicates that the component is not hidden

true Indicates hidden components

4. wx:if And hidden Comparison of

① The operation mode is different

wx:if With Dynamically create and remove elements The way , Control the display and hiding of elements

hidden With Switching styles The way （display: none/block;）, Control the display and hiding of elements

② Use advice

Switch frequently when , It is recommended to use hidden

Complex control conditions when , It is recommended to use wx:if collocation wx:elif、wx:else Switch between show and hide

WXML Template syntax - The list of rendering

🥭1. wx:for

adopt wx:for According to the specified array , Loop render duplicate component structures , Examples of syntax are as follows ：

<view wx:for="{
      {arry}}">
 The index is ：{
      {index}},item Item is :{
      {item}}
</view>

JS:

Page({

data: {
  arry:[' a mandarin orange ',' Apple ',' Banana ']
}


})

By default , Of the current loop item Indexes use index Express ; Current loop item use item Express .

effect ：

 

2. Manually specify the index and the variable name of the current item

Use wx:for-index You can specify Index of the current circular item Variable name

Use wx:for-item You can specify Current item Variable name

The sample code is as follows ：

3. wx:key Use

Be similar to Vue List rendering :key, When the applet realizes list rendering , It is also recommended that you specify a unique name for the rendered list item key value , thus Improve rendering efficiency , The sample code is as follows ：

<view wx:for="{
    {userList}}" wx:key="id">
{
    {item.name}}
</view>

 JS:

Page({

data: {
 userList:[
   {id:1,name:' heat '},
   {id:2,name:' Love '},
   {id:3,name:' Ed '},
   {id:4,name:' cheng '},
   {id:5,name:' Of '},
   {id:6,name:' Small '},
   {id:7,name:' white '},
   {id:8,name:' white '},
 ]
}


})

effect ：