小程序input實(shí)現(xiàn)數(shù)據(jù)雙向綁定

• 最終效果
• index.wxml
• index.js

最終效果

index.wxml

<view class="uploader"><input type="number" style="border: 2rpx solid #666;" bindinput='inputChange' data-name='peopleNumber' placeholder="輸入人數(shù)" /><input value="{{peopleNumber}}" style="border: 2rpx solid #666;" /> </view>

index.js

Page({data: {},// input框中輸入的值，立即保存到worker變量中 視圖=>data的更新// 變量worker變更，input框中的數(shù)據(jù)也就會(huì)立即變量 data=>視圖 （小程序原本就存在的功能，這一部分不需要刻意實(shí)現(xiàn)）inputChange(event) {let _this = thislet dataset = event.currentTarget.dataset;let value = event.detail.valuelet name = dataset.name;console.log(name)_this.data[name] = value;_this.setData({[name]: _this.data[name]})console.log(_this.data[name])} })

總結(jié)

以上是生活随笔為你收集整理的小程序input实现数据双向绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。