WeChat applet's view layer WXML binds data, templates, logic...-Mini Program Development-php.cn

The previous article introduced the MVC structure of the mini program:

page.js is the control layer (C), also called the business logic layer;

the data attribute in page.js, That is the data model layer (M);

page.wxml is the presentation layer (V);

page.wxss is the css, which enhances the presentation layer effect.

Modify the data attribute (M) through the business logic layer (C) and display it in the presentation layer (V).

That is the MVC design pattern.

1. Data binding

First look at the MVC process structure diagram of the Page

微信小程序之视图层WXML绑定数据、模板、逻...

If a variable is defined in data, such as

Page({
    data:{
        title: &#39;小程序实战教程&#39;,
        desc: &#39;视图层—WXML&#39;
    }
})

Copy after login

pass {{title}} in the page, The effect can be displayed, as shown in the following animation:

微信小程序之视图层WXML绑定数据、模板、逻...

##2. Common syntax for data binding

##2.1, content

## {{ message }}

2.2, component attributes (need to be within double quotes)

Same as content

##2.3, control attribute

< ;view wx:if="{{condition}}">

2.4, keyword (requires {{ } } within)

true: true of boolean type, representing true value.

false: false of boolean type, representing false value.

Note: Do not write checked="false" directly, its calculation The result is a string, converted to boolean type to represent a true value.

2.5, ternary operation

2.6, Arithmetic operations

{{a + b}} + { {c}} + d

##2.7, string operation

##2.8, data path operation

for For the object type, you can get the value through object.key;

For the array type, you can get the value through the subscript index, and the index starts from 0

Code and renderings:

微信小程序之视图层WXML绑定数据、模板、逻...

#3. Logical rendering syntax
3.1, logical judgment wx:if

2
3

##block wx:if

view2 < ;/view>

##3.2, wx:for

default array The subscript variable name of the current item defaults to index, and the variable name of the current item in the array defaults to item. Can also be specified via wx:for-index and wx:for-item.

{{index}}: {{item.message}}

Specify

{{idx}}: {{itemName.message}}

##block wx:for

{{ index}}: {{item}}

3.3, 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 < ;input/>'s input content, 's selected state), you need to use wx:key to specify the unique identifier of the item in the list. The value of wx:key is provided in two forms

1) A string representing a property of the item in the array of the for loop, and the value of the property needs to be a list The only string or number in the string and cannot be changed dynamically.

2) The reserved keyword *this represents the item itself in the for loop. This representation requires the item itself to be a unique string or number

When data changes trigger the rendering layer to re-render, components with keys will be corrected. The framework will ensure that they are reordered rather than re-created to ensure that the components maintain their own state and improve the list rendering time. s efficiency.

## {{item. id}}

See picture

微信小程序之视图层WXML绑定数据、模板、逻...