Heim > Artikel > WeChat-Applet > Datenbindung für die Entwicklung kleiner Programme
Datenbindung
Die dynamischen Daten in WXML stammen aus den Daten der entsprechenden Seite.
Einfache Bindung
Die Datenbindung verwendet die „Mustache“-Syntax (doppelte Klammern) zum Umschließen von Variablen und kann verwendet werden für:
Inhalte
<view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } })
KomponentenAttribute(müssen in doppelten Anführungszeichen stehen)
<view id="item-{{id}}"> </view> Page({ data: { id: 0 } })
Steuerattribute (müssen in doppelten Anführungszeichen stehen)
<view wx: if ="{{condition}}"> </view> Page({ data: { condition: true } })
Schlüsselwort (muss in doppelten Anführungszeichen stehen)
true: wahr vom booleschen Typ, der den wahren Wert darstellt.
false: false vom booleschen Typ, der einen falschen Wert darstellt.
<checkbox checked="{{false}}"> </checkbox>
Besonderer Hinweis: Schreiben Sie „checked="false"“ nicht direkt. Das Berechnungsergebnis ist eine Zeichenfolge, die in einen booleschen Typ konvertiert wird, um einen wahren Wert darzustellen.
Operation
kann einfache Operationen innerhalb von {{}} ausführen. Die folgenden Methoden werden unterstützt:
<view hidden="{{flag ? true : false}}"> Hidden </view>
Arithmetische Operationen
<view> {{a + b}} + {{c}} + d </view> Page({ data: { a: 1, b: 2, c: 3 } })
Der angezeigte Inhalt ist 3 + 3 + d
Logisches Urteil
<view wx:if="{{length > 5}}"> </view>
String-Operationen
<view>{{"hello" + name}}</view> Page({ data:{ name:"MINA" } })
Datenpfadoperationen
<view>{{ object . key }} {{ array [0]}}</view> Page({ data: { object: { key: 'Hello ' }, array: ['MINA'] } })
Kombination
kann auch direkt in Moustache zu einem neuen Objekt oder Array
Array
<view wx: for -items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view> Page({ data: { zero: 0 } })
zusammengefügt werden ist endlich kombiniert zu einem Array [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 den Erweiterungsoperator ... verwenden, 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
<template is="objectCombine" data="{{foo, bar}}"></template> Page({ data: { foo: 'my-foo', bar: 'my-bar' } })
und schließlich zu dem Objekt kombiniert werden ist {foo: 'my-foo', bar: 'my-bar'}
Hinweis: Die oben genannten Methoden können beliebig kombiniert werden, aber wenn es Variablennamen gibt, sind das die gleich, Die letzteren decken die vorherigen ab, wie zum Beispiel
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template> Page({ data: { obj1: { a: 1, b: 2 }, obj2: { b: 3, c: 4 }, a: 5 } })
Das endgültige kombinierte Objekt ist {a: 5, b: 3, c: 6}
[Verwandte Empfehlungen]
1. Laden Sie den vollständigen Quellcode des WeChat-Miniprogramms herunter
2. WeChat-Miniprogramm-Spieldemo wählen Sie verschiedene Farbblöcke aus
3. WeChat-Applet-Demo: Karussell-Bildtransformation
Das obige ist der detaillierte Inhalt vonDatenbindung für die Entwicklung kleiner Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!