小規模なプログラム開発のためのデータ バインディング

データ バインディング

WXML の動的データは、対応するページのデータから取得されます。

単純なバインディング

データ バインディングは、「Mustache」構文 (二重中括弧) を使用して変数をラップし、以下で使用できます。

<view> {{ message }} </view>
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

コントロール属性 (二重引用符で囲む必要があります)

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

キーワード (二重引用符で囲む必要があります)

tru​​e: ブール型の true、真の値を表します。

false: ブール型の false。偽の値を表します。

<view wx:
if
="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

特記事項:checked="false"を直接記述しないでください。計算結果は

string

となり、boolean型に変換されたものが真の値となります。

演算

は、{{}}内で簡単な演算を実行できます。次のメソッドがサポートされています:

三項演算

<checkbox checked="{{false}}"> </checkbox>

算術演算

<view hidden="{{flag ? true : false}}"> Hidden </view>

ビューのコンテンツは

3 + 3 + d

です。

論理判断

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

文字列操作

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

データパス操作

<view>{{"hello" + name}}</view>
Page({
  data:{
    name:"MINA"
  }
})

組み合わせ

は、Mustache内で直接組み合わせて、新しい

オブジェクトまたは配列を形成することもできます

配列

<view>{{
object
.
key
}} {{
array
[0]}}</view>
Page({  data: {
    object: {
      key: &#39;Hello &#39;
    },    array: [&#39;MINA&#39;]
  }
})

最終的に結合されたオブジェクトは {for: 1, bar: 2} です

展開演算子... を使用してオブジェクトを展開できます

<view wx:
for
-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})

最終的に結合されたオブジェクトは {a: 1, b: 2, c : 3, d: 4, e: 5}

オブジェクトのKeyとValueが同じで間接的に表現できる場合

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

最終的に結合されたオブジェクトは{foo: 'my-foo', bar: 'my -bar'}

注: 上記のメソッドは自由に組み合わせることができますが、変数名が同じ場合、後のメソッドは前のメソッドを上書きします。たとえば、

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

最終的に結合されたオブジェクト。は {a: 5、b: 3、c: 6} です

【関連の推奨事項】1.

WeChat ミニ プログラムの完全なソース コードをダウンロードします

2

WeChat ミニ プログラム ゲームのデモで別の色を選択します。ブロック

3. WeChat ミニプログラムのデモ: カルーセル画像変換

以上が小規模なプログラム開発のためのデータ バインディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。