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

{{ message }}

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

Component attributes (need to be within double quotes)

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

Control attribute (needs to be within double quotes)

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

Operation

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

Ternary operation



Arithmetic operations

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

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

The content in view is 3 + 3 + d

Logical judgment



String operations

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

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

Combination

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

array

{{item}}

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

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

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)!