<!-- 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

    })

  }

})

<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;}

<!-- 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)

  }

})

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

  }

})

<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>

<view class="container">

  <view class="header" bindtap='change'>

    <text>点击切换内容</text>

  </view>

    <view hidden="{{!show}}">

    <text>

    这是内容。。。

    这是内容。。。

    这是内容。。。

    这是内容。。。

    </text>

  </view>

  <view hidden="{{!show}}">

    <text>

    这是内容。。。

    这是内容。。。

    这是内容。。。

    这是内容。。。

    </text>

  </view>

</view>