Data Binding in WeChat mini-app tutorial and Wechat mini-app binding

Data Binding and Applet binding in the mini-program tutorial

Series of articles:

Mini-program tutorial-WXSS
References to mini-program tutorials
Events of mini-program tutorials
Small Program tutorial Template
List rendering of Applet tutorials
Conditional rendering of mini-program tutorials
Data Binding in applet tutorial
Mini-program tutorial-WXML

Data Binding

The dynamic data in WXML comes from the data of the corresponding Page.

Simple binding

Data Binding uses the "Mustache" syntax (double braces) to package variables, which can act on:

Content

<View >{{ message }}</view>

Page({ data: { message: 'Hello MINA!' }})

Component attributes (must be within double quotation marks)

<View id = "item-{id}"> </view>

Page({ data: { id: 0 }})

Control attributes (must be within double quotation marks)

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

Page({ data: { condition: true }})

Operation

You can perform simple operations within {}. The following methods are supported:

Ternary Computation

<View hidden = "{flag? True: false }}"> Hidden </view>

Arithmetic Operation

<View >{{ a + B }}+ {c }}+ d </view>

Page({ data: { a: 1, b: 2, c: 3 }})

The content in the view is 3 + 3 + d.

Logical judgment

<View wx: if = "{length> 5 }}"> </view>

String operation

<View >{{ "hello" + name }}</view>

Page({ data:{ name:"MINA" }})

Combination

You can also combine them in Mustache to form a new object or array.

Array

<View wx: for-items = "{[zero, 1, 2, 3, 4] }}" >{{ item }}</view>

Page({ data: { zero: 0 }})

Finally, it is combined into an array [0, 1, 2, 3, 4].

Object

<template is="objectCombine" data="{{for: a, bar: b}}"></template>Page({ data: { a: 1, b: 2 }})

The final combination objects are {for: 1, bar: 2}

You can also use the extension operator... to expand an object.

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>Page({ data: { obj1: {  a: 1,  b: 2 }, obj2: {  c: 3,  d: 4 } }})

The final combination objects are {a: 1, B: 2, c: 3, d: 4, e: 5}

If the key and value of an object are the same, it can be indirectly expressed

<Template is = "objectCombine" data = "{foo, bar}"> </template>

Page({ data: { foo: 'my-foo', bar: 'my-bar' }})

The final combination object is {foo: 'My-foo', bar: 'My-bar '}

Note: The preceding method can be combined at will, but if the variable name is the same, the latter will overwrite the former, as shown in figure

<Template is = "objectCombine" data = "{... obj1,... obj2, a, c: 6}"> </template>

Page({ data: { obj1: {  a: 1,  b: 2 }, obj2: {  b: 3,  c: 4 }, a: 5 }})

The final combination objects are {a: 5, B: 3, c: 6}

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!