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: &#39;Hello MINA!&#39;
  }
})

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:

Ternäre Operation

<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: &#39;Hello &#39;
    },    array: [&#39;MINA&#39;]
  }
})

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: &#39;my-foo&#39;,
    bar: &#39;my-bar&#39;
  }
})

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!