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

一、单项数据绑定

<!-- 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>
    <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
  //   })
  // },

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