First, the individual data binding
<!-- 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 }) } })
Second, Login Register Case (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> <input class="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 // }) // }, // wrapper function inputChange: function (E) { var prop e.target.dataset = [ ' prop ' ] var changed = {} changed[prop] = e.detail.value this.setData(changed) }, // function to handle the event after clicking the button 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;}
Login Register Case (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> <input class="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 // implement the login interface function with form from Page ({ data: { username: "admin", password: "123456" }, // function to handle the event after clicking the button login: function (e) { console.log(e) } })
Third, the conditions rendering
(1)、wx:if
<!-- index.wxml --> <view class="container"> <view class="header" bindtap='change'> <Text> click switch SUMMARY </ text> </view> <view wx:if="{{!show}}"> <text> This is the content. . . This is the content. . . This is the content. . . This is the content. . . </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> click switch SUMMARY </ text> </view> <block wx:if="{{!show}}"> <view> <text> This is the content. . . This is the content. . . This is the content. . . This is the content. . . </text> </view> <view> <text> This is the content. . . This is the content. . . This is the content. . . This is the content. . . </text> </view> </block> </view>
(2)、hidden
<view class="container"> <view class="header" bindtap='change'> <Text> click switch SUMMARY </ text> </view> <view hidden="{{!show}}"> <text> This is the content. . . This is the content. . . This is the content. . . This is the content. . . </text> </view> <view hidden="{{!show}}"> <text> This is the content. . . This is the content. . . This is the content. . . This is the content. . . </text> </view> </view>