Liaison de données du programme WeChat Mini

Liaison de données

Les données dynamiques en WXML proviennent des données de la page correspondante.

Liaison simple

La liaison de données utilise la syntaxe "Moustache" (accolades doubles) pour envelopper les variables, qui peuvent être utilisées sur :

Contenu

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

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

Attributs de composant (doivent être entre guillemets doubles)

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

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

Attributs de contrôle (nécessite pour être entre guillemets doubles)

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

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

Mots clés (doit être entre guillemets doubles)

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

运算

可以在{{}}内进行简单的运算，支持的有如下几种方式：

三元运算

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

算数运算

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

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

view中的内容为3 + 3 + d

逻辑判断

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

字符串运算

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

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

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

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

组合

也可以在Mustache内直接进行组合，构成新的对象或者数组

数组

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

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

最终组合成数组[0, 1, 2, 3, 4]

对象

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

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

最终组合成的对象是{for: 1, bar: 2}

也可以用扩展运算符...来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

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

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}

如果对象的key和value相同，也可以间接地表达

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

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

最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如

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

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

最终组合成的对象是{a: 5, b: 3, c: 6}