WeChat Mini-Programm-Tutorial zur Datenbindung

Datenbindung

Die dynamischen Daten in WXML stammen aus den Daten der entsprechenden Seite.

Einfache Bindung

Die Datenbindung verwendet die „Mustache“-Syntax (doppelte Klammern), um Variablen einzuschließen, die angewendet werden können auf:

Inhalt

< view> {{ message }}

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

Komponenteneigenschaften (müssen in doppelten Anführungszeichen stehen)

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

Steuerattribute (müssen in doppelten Anführungszeichen stehen)

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

Operation

kann einfache Operationen innerhalb von {{}} ausführen. Die folgenden Methoden werden unterstützt:

Ternäre Operationen

Hidden

Rechenoperationen

< view> }} + {{c}} + d

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

Der angezeigte Inhalt ist 3 + 3 + d

Logisches Urteil

< view wx="{{length > 5}}">

String-Operationen

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

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

Kombination

kann auch direkt in Mustache zu einem neuen Objekt oder Array kombiniert werden

Array

{{item}}

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

Endlich zu einem Array zusammengefasst [ 0, 1, 2, 3, 4]

Objekt

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

Das endgültige kombinierte Objekt ist {für: 1, Balken: 2}

Sie können auch verwenden der Spread-Operator... um ein Objekt zu erweitern

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

Das endgültige kombinierte Objekt ist {a: 1, b: 2, c: 3, d: 4 , e: 5}

Wenn der Schlüssel und der Wert des Objekts gleich sind, kann er auch indirekt ausgedrückt werden