微信小程序教程之雙向數據綁定實現

微信小程序教程之雙向數據綁定實現

前端開發的朋友都知道,現在無論哪個框架都會有雙向數據綁定,這樣極大的方便了我們在表單獲取值上。那麼微信小程序是沒有雙向數據綁定的,不過我們可以通過簡單的方法實現和其他框架類似的雙向數據綁定,這樣可以讓我們更好的獲取表單的數據。

微信小程序教程之雙向數據綁定實現

下面用例子來介紹如何實現雙向數據綁定。

首先定義如下結構:

微信小程序教程之雙向數據綁定實現

要實現雙向的數據綁定,首頁要實現input數據的設置,如下:

微信小程序教程之雙向數據綁定實現

微信小程序教程之雙向數據綁定實現

這樣我們就可以通過更改data中的值來設置輸入框的值了。

再來獲取輸入框的值並綁定到text中,如下:

微信小程序教程之雙向數據綁定實現

微信小程序教程之雙向數據綁定實現

效果如下:

微信小程序教程之雙向數據綁定實現

這樣基本的雙向數據綁定就算完成了,不過我們還需要設置輸入框的值,如下:

微信小程序教程之雙向數據綁定實現

微信小程序教程之雙向數據綁定實現

效果如下:

微信小程序教程之雙向數據綁定實現

到這裡基本上雙向數據綁定就完成了,後面我們對於表單的操作大部分都是這樣的,表單數據的獲取設置等。

微信小程序教程之雙向數據綁定實現


分享到:


相關文章: