Heim >WeChat-Applet >Mini-Programmentwicklung >Datenbindung für die Entwicklung kleiner Programme

Datenbindung für die Entwicklung kleiner Programme

Y2J
Y2JOriginal
2017-05-18 13:47:502047Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn