アプレットのデータ バインディング
1. レンダリングするデータをindex.jsのdataに配置します
Page({ data: { info:'HELLO WORLD', imgSrc:'/images/1.jpg', randomNum:Math.random()*10, randomNum1:Math.random().toFixed(2) }, })
2. WXML の {{}} を通じて データを取得します
<view>{ {info}}</view> <image src="{ {imgSrc}}" mode="widthFix"></image> <view>{ {randomNum >= 5 ? '大于等于5' : '小于5'}}</view> <view>{ {randomNum1 * 100}}</view>
アプレットのイベント バインディング
イベントとは: レンダリング層からロジック層への通信方法。レンダリング層でのユーザーの動作をロジック層に転送します。
よくある出来事
- タップ(タッチして離れる)
- input(テキストボックス入力)
- 変化(状態変化)
バインドによるイベントのバインド
bindtap/bind:tap
イベントオブジェクトのプロパティのリスト
イベント コールバックがトリガーされると、イベント オブジェクト イベントが受信されます。そのプロパティは次のとおりです。
タイプ イベントタイプ タイムスタンプ イベントが発生するまでにページが開くまでにかかったミリ秒数 目標 イベントをトリガーしたコンポーネント(イベントをトリガーしたソースコンポーネント)のいくつかの属性値のコレクション 現在のターゲット 現在のコンポーネント (イベントをトリガーしているコンポーネント) のいくつかの属性値のコレクション 詳細 追加情報 触れる タッチイベント、現在画面上にあるタッチポイント情報の配列 変更されたタッチ タッチイベント、現在変化しているタッチポイント情報の配列 1. イベントをコンポーネントにバインドする
<button type="primary" bindtap="btnHandler">按钮</button>
2. コンポーネントによってトリガーされるイベントをクリックします
Page({ btnHandler(e){ console.log(e) } })
3. バインディング効果を表示する
イベントバインドされたデータ (vue の v-model イベント) をレンダリングして同期します。
1. 共有データを作成する
Page({ data:{ msg:"你好" }, })
2. 入力コンポーネントをイベント syn にバインドし、データをレンダリングします。
{ {}} データを取得する
<input value="{ {msg}}" bindinput="syn"/>
3. js で syn イベントを記述してデータを同期する
this.setData はデータを再割り当てします
Page({ data:{ msg:"你好" }, syn(e){ this.setData({ msg: e.detail.value }) } })