Template syntax

Data binding

<!-- 1. character string -->
<view>{{ msg }}</view>
  
<!-- 2. number -->
<view>{{ num }}</view>

<!-- 3. boolear  -->
<view>Has the goal been achieved?{{flag}}</view>

<!-- 4. Object -->
<view>{{per.name}}</view>
<view>{{per.age}}</view>
<view>{{per.sex}}</view>
  
<!-- 5. Use in labels -->
<view data-num="{{num}}">Custom properties</view>

<!-- 6. use bool Types act as properties -->
<view> 
  <checkbox checked="{{ flag }}"></checkbox>
</view>

operation

<!-- 1. Simple operation -->
<view>{{1+1}}</view>

<!-- 2. String splicing-->
<view>{{'1'+'1'}}</view>

<!-- 3. Ternary operator  -->
<view>{{21 % 2 === 0 ? "even numbers":"Odd number" }}</view>

List rendering

Prefix with wx

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

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:'foo1'
    },{
        message:'foo2'
    }]
}
})

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 subscript of the array

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

Object loop

• wx:for = {{object}} wx:for item = "value of object" wx:for index = "attribute of object"

• When looping objects, you'd better modify the names of item and index

  wx:for="{{object}}" wx:for-item="value" wx:for-index="key" wx:key="id"

multiplication table

<!-- 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 = "unique value" is used to improve the performance of list rendering

• When wx:key binds an ordinary string, the string name must be the only attribute of the object in the circular array
• wx:key = "*this" means that your array is an ordinary array * this means that it is a circular item

block wx:for

Similar to block wx:if, wx:for can also be used on the < block / > tag to render a structure block containing multiple nodes

• Label for placeholder
• When writing code, you can see that the tag exists
• The page rendering applet will remove it

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

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

conditional rendering

1. wx:if = "{{true/false}}"

   if , else, if else

   wx:if

   wx:elif

   wx:else

2. hidden

   • Add the attribute hidden directly to the label
   • hidden = "{{true}}"
     • Hidden is set to display: none by adding the class name hidden

3. Which is used in what scene

   • When the label is not switched frequently, wx:if is preferred
   • hidden is preferred when labels are frequently switched
     • Switch the display by adding styles
     • Do not use the hidden attribute with the style display

<view wx:if="{{true}}">display</view>
<view wx:elif="{{false}}">hide</view>
<view wx:else>hide</view>
<view hidden >hide</view>
<view hidden style="display: flex;" >No longer hidden</view>

Case: simple addition and subtraction button data binding

<!-- 
    1.Need to give input Label binding input event
    Binding keyword bindinput
    Event in data Write later
    2. If you get the value of the input box  
    Get from event source object
    e.detail.value
    3.Assign the value of the input box to data among
    Not directly 
        1. this.data.num = e.detail.value
        2. this.num = e.detail.value
    Correct writing
        this.setData({
            num : e.detail.value
        })

    4. Need to add a click event
        1. bindtap 
        2. Parameters cannot be passed directly in events in applets
        3. Pass parameters through the method of custom attributes
            data-operation ="{{1}}"
        4. Get custom properties from event source
     

 -->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation ="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

// pages/demo4/demo4.js
Page({
    data: {
        num:0
    },
    // Execution logic of input event of input box
    handleInput(e){
        this.setData({
            num : e.detail.value
        })
    },
    handletap(e){
        // console.log(e);
        // currentTarget.dataset.operation
        // Get custom attribute operation
        const operation = e.currentTarget.dataset.operation
        // console.log(operation);
        this.setData({
            num : this.data.num + operation
        })
    }
})