Liaison de données du didacticiel WeChat Mini Program

Data Binding

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" (doubles accolades) pour envelopper les variables, qui peuvent être appliquées à :

Contenu

896ed4a4b7d92085d8a5871a0f7d6f27 {{ message }} de5f4c1163741e920c998275338d29b2

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

Propriétés des composants (doivent être entre guillemets doubles)

0a94fac0da335ed0d6ce60297265b666 de5f4c1163741e920c998275338d29b2

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

Attributs de contrôle (doivent être entre guillemets doubles)

fbb5b6c617e7fd263d48ea5e88ce0c91 de5f4c1163741e920c998275338d29b2

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

Opération

peut effectuer des opérations simples dans {{}} Les méthodes suivantes sont prises en charge :

Opérations ternaires
.
4c973292b3af8cbf480d0892c375bca0 Hidden de5f4c1163741e920c998275338d29b2

Opérations arithmétiques

< {{c}} d de5f4c1163741e920c998275338d29b2

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

Le contenu affiché est 3 3 d

Jugement logique

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

Opérations sur les chaînes

89c662c6f8b87e82add978948dc499d2{{"hello" name}} de5f4c1163741e920c998275338d29b2

La

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

Combinaison

peut également être combinée directement dans Moustache pour former un nouvel objet ou un nouvel objet

Array

< ;view wx:for-items=" {{[zéro, 1, 2, 3, 4]}}"> {{item}} de5f4c1163741e920c998275338d29b2

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

Enfin combiné dans un tableau [0, 1, 2, 3 , 4]

Objet

<template is="objectCombine" data="{{for: a, bar: b}}"></template>  
Page({  
 data: {  
 a: 1,  
 b: 2  
 }  
})

L'objet combiné final est {pour : 1, barre : 2}

peut également être Utilisez l'opérateur de propagation... pour développez un objet

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

. L'objet combiné final est {a : 1, b : 2, c : 3, d : 4, e : 5>

Si la clé et la valeur de l'objet sont les mêmes, cela peut aussi être exprimé indirectement

ea9b0f7cc2981a2d0cf3226947355b6821c97d3a051048b8e55e3c8f199a54b2

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

L'objet combiné final est {foo: 'my-foo', bar: 'my-bar'>

Remarque : les méthodes ci-dessus peuvent être combinées à volonté, mais s'il y a des variables Si le les noms sont les mêmes, ces derniers écraseront les précédents, comme