conditional rendering

• You can use wx:if = "" to determine whether to render the code block

<view wx:if="{{flag}}">No rendering</view>
<view wx:if="flag">Render</view>
<view wx:if="">No rendering</view>
<view wx:if=" ">Render</view>

data: {
    flag: false,
},

• You can also use wx:elif and wx:else to judge a code block
• At this time, the tags of wx:if, wx:elif and wx:else must be written together

<view wx:if="{{age >= 18}}">adult</view>
<view wx:elif="{{age < 18}}">juveniles</view>
<view wx:else>Not people</view>

Use of block tag

If you want to judge multiple component labels at one time, you can use a block label to wrap multiple components and use wx:if control attribute on it

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

< block / > is just a wrapper element. It won't do any rendering in the page and only accepts control attributes

hidden

Set the rendering of elements by changing the style display

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

Cannot be used with a block tag

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 when 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

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

List rendering

• Bind an array with the wx:for control attribute on the component, and the component can be rendered repeatedly with the data of each item in the array
• The subscript 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="{{arr}}">{{index}} - {{item}}</view>

data: {
    arr: ["Java", "C++", "Python", "JS"],
},

• You can use Wx: for item to modify the variable name of the current element of the array
• You can use Wx: for index to modify the variable name of the current subscript of the array

<view wx:for="{{arr}}" wx:for-index="id" wx:for-item="name">{{id}} - {{name}}</view>

Use with block tag

<block wx:for="{{arr}}">
    <view>index: {{index}}</view>
    <view>item: {{item}}</view>
</block>

wx:key

If the order of items in the list will be changed dynamically, and you want the item to maintain its own characteristics and status (input in eg: input / switch selected), you need to use wx:key to specify the unique identifier of the item

When the data change triggers the rendering layer to re render, the components with key s will be corrected, and the framework will ensure that they are reordered rather than re created, so as to ensure that the components maintain their own state and improve the efficiency of list rendering

If wx:key is not provided, the console will issue a warning. If you know that the list is static or you don't have to pay attention to its order, you can choose to ignore it

<button type="primary" bindtap="addUser">Click Add User</button>
<view wx:for="{{arr}}">
    <checkbox /> {{item.id}} {{item.name}}
</view>

Page({
    data: {
        arr: [
            { id: 3, name: "JS" },
            { id: 2, name: "C++" },
            { id: 1, name: "Java" },
        ],
    },
    addUser(e) {
        let tempArr = this.data.arr; // Temporary array
        let newId = this.data.arr.length + 1;
        let newUser = { id: newId, name: "Book" + newId }; // Create new data
        tempArr.unshift(newUser); // Add new data
        this.setData({
            arr: tempArr, // Update data
        });
    },
});

• At this time, we first select some check boxes, and then click add data. We will find that the new check box is selected, while the originally selected check box is moved to the bottom and not selected
• This is related to the underlying algorithm of the applet. When adding new tags, the framework will maximize the reuse of existing tags, and the selected check box is always at the top
• At this time, we can set the wx:key attribute. If the wx:key attribute values are different, it cannot be reused

Wx: two settings of key

1. String, which represents a property of item in the array of for loop. The value of this property must be the only string / number in the list and cannot be changed dynamically
2. The reserved keyword * this represents the item itself in the for loop, which requires that the item itself is a unique string / number

<button bindtap="addUser">Click Add User</button>
<view wx:for="{{arr}}" wx:key="id">
    <checkbox /> {{item.id}} {{item.name}}
</view>

Act on object

• index: object properties
• item: attribute value of the object

<view wx:for="{{obj}}" wx:key="*this">
    {{index}}: {{item}}
</view>

Act on string

• index: subscript
• item: corresponding character

<view wx:for="str" wx:key="*this">
    {{index}}: {{item}}
</view>

• Equivalent to string array: 0: s 1: t 2: r

<view wx:for="{{['s', 't', 'r']}}" wx:key="*this">
    {{index}}: {{item}}
</view>

• If there is a space between curly braces and quotation marks, it will be parsed into a string: 0: s, 1:, 2: T, 3:, 4: R, 5:

<view wx:for="{{['s', 't', 'r']}} " wx:key="*this">
    {{index}}: {{item}}
</view> 

• It is equivalent to the value in curly braces splicing the space string

<view wx:for="{{['s', 't', 'r'] + ' '}}" wx:key="*this">
    {{index}}: {{item}}
</view>

• Tip: array to string ['s','t ',' R '] +' '→ s,t,r