WeChat Mini Program Tutorial Data Binding

Data binding

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

Simple binding

Data binding uses "Mustache" syntax (double braces) to wrap variables, which can be applied to:

Content

89c662c6f8b87e82add978948dc499d2 {{ message }} de5f4c1163741e920c998275338d29b2

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

Component attributes (need to be within double quotes)

29ea2f529b612ba99e33343422a995cb de5f4c1163741e920c998275338d29b2

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

Control attribute (needs to be within double quotes)

81f8f5e5f02be6b392bf1cf73e89ce13 de5f4c1163741e920c998275338d29b2

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

Operation

Simple operations can be performed within {{}}. The following methods are supported:

Ternary operation

c0dc69f695518309bed4bf463f5a1280 Hidden de5f4c1163741e920c998275338d29b2

Arithmetic operations

89c662c6f8b87e82add978948dc499d2 {{a + b}} + {{c}} + d de5f4c1163741e920c998275338d29b2

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

The content in view is 3 + 3 + d

Logical judgment

2e26af55a239d1709b9eb3089bd58f4d 5}}"> de5f4c1163741e920c998275338d29b2

String operations

89c662c6f8b87e82add978948dc499d2{{"hello" + name}}20908554640865bb724c429685f97dbe

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

Combination

can also be combined directly in Mustache to form a new object or array

array

269038f735c76e920c6864dce0556263 {{item}} de5f4c1163741e920c998275338d29b2

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

Finally 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 combined object is {for: 1, bar: 2}

You can also use the spread operator... 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 combined object is {a: 1, b: 2, c: 3, d: 4, e: 5}

If the key and value of the object Similarly, it can also be expressed indirectly

ea9b0f7cc2981a2d0cf3226947355b6821c97d3a051048b8e55e3c8f199a54b2

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

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

Note: The above methods can be combined at will, but if there are the same variable names, the latter ones will overwrite the previous ones, such as

300fb0406de500a2b7f33a48299539b321c97d3a051048b8e55e3c8f199a54b2

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

The final combined object is {a: 5, b: 3, c: 6}

The above is the content of data binding in the WeChat applet tutorial. For more related content, please pay attention to the PHP Chinese website (www .php.cn)!