微信小程序开发--数据绑定

一、单项数据绑定

<!-- 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// })// },//封装函数 inputChange: function(e) {var prop = e.target.dataset['prop']var changed = {}changed[prop] = e.detail.valuethis.setData(changed)},// 点击按钮之后处理事件的函数 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表单实现登录界面功能 Page({data: {username: "admin",password: "123456"},// 点击按钮之后处理事件的函数 login: function(e) {console.log(e)} })

三、条件渲染

(1)、wx:if

<!-- index.wxml --> <view class="container"><view class="header" bindtap='change'><text>点击切换内容</text></view><view wx:if="{{!show}}"><text>这是内容。。。这是内容。。。这是内容。。。这是内容。。。</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>点击切换内容</text></view><block wx:if="{{!show}}"><view><text>这是内容。。。这是内容。。。这是内容。。。这是内容。。。</text></view><view><text>这是内容。。。这是内容。。。这是内容。。。这是内容。。。</text></view></block> </view>

 

(2)、hidden

<view class="container"><view class="header" bindtap='change'><text>点击切换内容</text></view><view hidden="{{!show}}"><text>这是内容。。。这是内容。。。这是内容。。。这是内容。。。</text></view><view hidden="{{!show}}"><text>这是内容。。。这是内容。。。这是内容。。。这是内容。。。</text></view> </view>

 

转载于:https://www.cnblogs.com/DreamchaserHe/p/11164044.html

总结

以上是生活随笔为你收集整理的微信小程序开发--数据绑定的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。