WeChat ミニ プログラム チュートリアルのデータ バインディング

データ バインディング

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

単純なバインディング

データ バインディングは、「Mustache」構文 (二重中括弧) を使用して変数をラップし、以下で使用できます。属性 (二重引用符で囲む必要があります)

416cc860c1650c84e1b5f4493a8a5c42

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

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

77f5b34b6b5a44fc2b929cac866c1af6

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

オペレーション

次のメソッドがサポートされています:

3 つのメタオペレーション

7f21bb5e3a76e9ea4691bf6ea0d1232e 非表示 de5f4c1163741e920c998275338d29b2

算術演算

89c662c6f8b87e82add978948dc499d2 {{a + b}} + {{c} } + d 20908554640865bb724c429685f97dbe

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

ビューの内容は 3 + 3 + d

論理判断

2428c98322da0786c26d2124ea16d07a 5}}"de5f4c1163741e920c998275338d29b2

文字列演算

89c662c6f8b87e82add978948dc499d2{{"hello" + name}}de5f4c1163741e920c998275338d29b2

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

組み合わせ

をMustache内で直接組み合わせて、新しいオブジェクトまたは配列

配列を形成することもできます

269038f735c76e920c6864dce0556263/view>

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

最終的に配列 [0, 1, 2, 3, 4]

オブジェクト

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

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

スプレッド演算子を使用してオブジェクトを展開することもできます

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

最終的な結合結果のオブジェクトは{a : 1, b: 2, c: 3, d: 4, e: 5}

オブジェクトのキーと値が同じであれば間接的に表現することも可能

98370c5ec9d1e1327bcbe2b8c89648fc21c97d3a051048b8e55e3c8f199a54b2

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

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

注: 上記のメソッドは自由に組み合わせることができますが、同一の変数名がある場合、

8392b582764706b05083569f8b14c8ee21c97d3a051048b8e55e3c8f199a54b2

Page({  
 data: {  
 foo: 'my-foo',  
 bar: 'my-bar'  
 }  
})

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

上記はWeChat miniのデータバインディングの内容ですプログラム チュートリアル、詳細 関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。