WeChat program data binding

Data binding

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

Simple binding

Data binding wraps variables using the "Mustache" syntax (double braces) and can be used to:

Content

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

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

Component properties (need to be within double quotes)

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

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

Control properties (need to be within double quotes)

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

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

Keywords (need to be within double quotes)

<checkbox checked="{{false}}"> </checkbox>

Operation

Simple {{}} performed within the .

The thyme operation

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

Arithmetic operations

<view> {{a + b}} + {{c}} + d </view>

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

The content in the view 3 + 3 + d

logical judgment

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

String operations

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

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

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

Combination

You can also combine directly within Mustache to form a new object or array.

Array

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

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

The final combination is an array of 0, 1, 2, 3, 4.

Object

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

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

The objects that are {for: 1, bar: 2}

You can also use the extension ... 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 objects that are eventually combined are : {a: 1, b: 2, c: 3, d: 4, e: 5}

If the key of the object is the same as the value, it can also be expressed indirectly.

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

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

The objects that are {foo: 'my-foo', bar:'my-bar'}

Note: The above methods can be combined at will, but if there is a case where the variable name is the same, the back side will cover the front, such as:

<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 objects that are eventually combined are : {a: 5, b: 3, c: 6} .

Note: If there is a space between parentheses and quotation marks, it will eventually be parsed into a string

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

Equivalent to

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>