ホームページ  >  記事  >  WeChat アプレット  >  WeChat アプレットのデータ バインディングの分析例 (コード)

WeChat アプレットのデータ バインディングの分析例 (コード)

不言
不言オリジナル
2018-08-21 16:38:412574ブラウズ

この記事では、WeChat アプレットのデータ バインディングの分析例 (コード) を紹介します。必要な方は参考にしてください。

1. WeChat アプレットは、js ページから wxml ページのタグをバインドして、タグの値や属性を取得または設定することはできません。すべてはデータ バインディングによって実現されます。
2 データは、WXML のデータから取得されます。対応するページ。

データバインディング: 1. 単純なデータバインディング

wxml中应用双大括号将data中的数据绑定到相应的标签中:
<view> {{ message }} </view>
js中:
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

2. コントロール属性のバインド

wxml中,其中绑定的要在双引号之中:
<view id="{{id}}"> </view>
js中:
Page({
  data: {
    id: 0
  }
})

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

wxml中(绑定在双引号中)
<view wx:if="{{condition}}"> </view>
//作为条件句出现,可以动态决定某一个标签出现不出现
js中:
Page({
  data: {
    condition: true
  }
})
---或---
wxml中(绑定在双引号中)
<view hidden="{{condition}}"> </view>
//作为条件句出现,可以动态决定某一个标签出现不出现
js中:
Page({
  data: {
    condition: true
  }
})
//hidden与wx:if的区别:
hidden只是隐藏,但是节点是生成的
wx:if不生成节点

5.操作

true:boolean 类型的 true,代表真值。

false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}"> </checkbox>
特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。
//在新版的微信小程序开发工具中,这个问题好像被解决了,即checked="true"也是对的

6. 組み合わせ (あまり一般的ではないため、ここでは詳しく説明しません。必要に応じて、WeChat アプレット開発ドキュメント、データ バインディング部分を参照してください)

関連する推奨事項:

WeChat アプレットのカスタム分析データの処理

WeChatミニプログラムでのアイコンフォントの使用方法の詳細な説明(コード付き)

WeChatミニプログラムの例:ランダム検証コードの実装(コード付き)

以上がWeChat アプレットのデータ バインディングの分析例 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。