WeChatウィジェットの比較機能を実現する方法のまとめ(5つの方法)


まずindex.wxmlページにテストページを書きます。
図のように:
在这里插入图片描述
コードは以下の通りです

次は比較機能の実現です。
第一の方法
まず、2つのinputコンポーネントの中で、bindchange方法でイベント処理関数をバインドし、buttonコンポーネントの中で、bindtapでイベント関数をバインディングする。
図のように
在这里插入图片描述
次にindex.jsで実現します。
コードは以下の通りです
在这里插入图片描述
ページ中の少量のinputコンポーネントに適用される場合
第二の方法
第二の方法は同じ関数を結合するための2つのinputコンポーネントです。
idとdatasetで元素を取得します。
1.idで取得する
在这里插入图片描述
コードの具体的な実装は以下の通りです。
在这里插入图片描述
2.datasetで要素を取得する
在这里插入图片描述
具体的なコードは下記の通り実現されます。
在这里插入图片描述
第三の方法
textコンポーネントに直接処理して計算ロジックを計算します。
在这里插入图片描述
具体的な実現コードは以下の通りです。
在这里插入图片描述
第四の方法
条件レンダリングによるサイズ比較
wx:ifまたはwx:if wx:elseを使って実現します。
在这里插入图片描述
または
在这里插入图片描述
第五の方法
フォームからinputコンポーネントの値を取得し、比較結果
在这里插入图片描述
実現コードは以下の通りです
在这里插入图片描述
最終的に成功した運転は以下の通りです。
在这里插入图片描述
締め括りをつける
ここでは、WeChatウィジェットの比較機能についてのまとめ(5つの方法)を紹介します。さらに関連するWeChatウィジェットの比較内容は、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。