一、單項數(shù)據(jù)綁定

<!-- index.wxml --> <view class="container"><form><input value="{{msg}}" bindinput='inputData' /><text>{{msg}}</text></form> </view>

　　

//index.js Page({data: {msg:"initial"},inputData:function(e){this.setData({msg:e.detail.value})} })

　　二、登錄注冊案例(1)

<!-- index.wxml --> <view class="container"><view class="header"><image src="../images/logo.png"></image></view><view class="inputs"><input class="username" placeholder='請輸入用戶名' value="{{username}}"bindinput='inputChange'data-prop="username"></input><inputclass="password" type="password" placeholder='請輸入密碼'value="{{password}}" bindinput='inputChange'data-prop="password"></input></view><view class="buttons"><button type="primary" bindtap='login'>登錄</button><button type="default">注冊</button></view> </view> //index.js
Page({data: {// msg: "initial",username: "",password: ""},inputData: function(e) {this.setData({msg: e.detail.value})},// userNameChange: function(e) {// this.setData({// username: e.detail.value// })// },// passwordChange: function(e) {// this.setData({// password: e.detail.value// })// },//封裝函數(shù) inputChange: function(e) {var prop = e.target.dataset['prop']var changed = {}changed[prop] = e.detail.valuethis.setData(changed)},// 點擊按鈕之后處理事件的函數(shù) login: function() {console.log(this.data)} }) /**index.wxss**/ .header image{width: 50px;height: 50px;margin-bottom: 120px} .inputs input{border:solid 1px silver;width: 260px;height:40px;padding-left:10px;} .buttons{margin-top:50px;} .buttons button{width:260px;}

?

登錄注冊案例(2)

<!-- index.wxml -->
<form bindsubmit='login'><view class="container"><view class="header"><image src="../images/logo.png" mode="aspectFit"></image></view><view class="inputs"><input class="username" placeholder='請輸入用戶名'name="username"value="{{username}}"> </input><inputclass="password" type="password" placeholder='請輸入密碼'name="password"value="{{password}}"></input></view><view class="buttons"><button type="primary" form-type="submit">登錄</button><button type="default">注冊</button></view></view> </form> //index.js //用from表單實現(xiàn)登錄界面功能 Page({data: {username: "admin",password: "123456"},// 點擊按鈕之后處理事件的函數(shù) login: function(e) {console.log(e)} })

三、條件渲染

(1)、wx:if

<!-- index.wxml --> <view class="container"><view class="header" bindtap='change'><text>點擊切換內(nèi)容</text></view><view wx:if="{{!show}}"><text>這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。</text></view>
</view> //index.js Page({data: {show:"false"},change:function(){this.setData({show:!this.data.show})} })

(2)、block? wx:if

<view class="container"><view class="header" bindtap='change'><text>點擊切換內(nèi)容</text></view><block wx:if="{{!show}}"><view><text>這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。</text></view><view><text>這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。</text></view></block> </view>

?

(2)、hidden

<view class="container"><view class="header" bindtap='change'><text>點擊切換內(nèi)容</text></view><view hidden="{{!show}}"><text>這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。</text></view><view hidden="{{!show}}"><text>這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。這是內(nèi)容。。。</text></view> </view>

?

轉(zhuǎn)載于:https://www.cnblogs.com/DreamchaserHe/p/11164044.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序开发--数据绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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