Data binding for small program development

Data binding

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

Simple binding

Data binding uses "Mustache" syntax (double curly brackets) to wrap variables and can be used on:

Content

<view> {{ message }} </view>
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

ComponentProperties(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)

true: true of boolean type, representing true value.

false: false of boolean type, representing false value.

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

Special note: Do not write checked="false" directly. The calculation result is a string, which represents a true value after being converted into a boolean type.

Operation

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

Ternary operation

<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 view is3 + 3 + d

Logical judgment

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

String operations

<view>{{"hello" + name}}</view>
Page({
  data:{
    name:"MINA"
  }
})

Data path operations

<view>{{
object
.
key
}} {{
array
[0]}}</view>
Page({  data: {
    object: {
      key: &#39;Hello &#39;
    },    array: [&#39;MINA&#39;]
  }
})

Composition

It can also be combined directly 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 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}

Also Use the expansion 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 combined object is {a: 1, b: 2, c: 3, d: 4, e: 5}

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

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: &#39;my-foo&#39;,
    bar: &#39;my-bar&#39;
  }
})

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

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

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

Is {a: 5, b: 3, c: 6}

[Related recommendations]

1. WeChat applet complete source code download

2. WeChat Mini Program Game Demo Select Different Color Blocks

3. WeChat Mini Program Demo: Carousel Image Transformation

The above is the detailed content of Data binding for small program development. For more information, please follow other related articles on the PHP Chinese website!