Learning data binding of WeChat applet WXML

Documentation: Data Binding·Mini Programs This post is a note
for 9 hours of learning to complete the development of WeChat Mini Programs

Data binding uses two curly braces.

1. bind text content

<!--index.wxml-->
<view>
    <text>{
    
    {
    
    message}}</text>
</view>

//index.js
Page({
    data:{
        message:"Hello,world"
    }
})

2. Binding properties

<!-- index.wxml -->
<view>
    <text data-name="{
    
    {
    
    theName}}">
    </text>
</view>

data-name is a custom attribute. When an event is triggered on the component, the data-* attribute will be sent to the event handler. So the data on the page can be passed to the logic layer through the data attribute.

//index.js
Page({
    data: {
        theName:"Jack"
    }
})

3. Operator Binding

<!-- index.wxml -->
<view hidden="{
    
    {
    
    flag ? true : false}}">
    Hidden
</view>

The hidden attribute of the view tag can be set to display or hide the content of the view tag.

//index.js
Page({
    data:{
        flag: false
    }
})

If the passed flag variable is false and the hidden attribute is false, the content of the label will be displayed; if the variable flag is true, the content of the view label will be displayed.

There are other binding methods, please refer to the Mini Program Framework Documentation: Data Binding · Mini Program

label attribute

The common properties that all components have:

For details, see: Component · Applet
bind, catch can bind the event of the component, and perform some operations through the callback function of the bound event. For details, see: Event·Mini Program