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

データ バインディング

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

単純なバインディング

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

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

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

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

オペレーション

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

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

< ;view hidden="{{flag ? true : false}}"> 非表示

算術演算

{{a + b}} + {{c} } + d < /view>

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

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

論理判断

文字列演算

{{"hello" + name}}

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

組み合わせ

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

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

/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}

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

<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'} です

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

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

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

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