input和btton的相互使用————小程序

input和btton的相互使用————小程序

index.js

  data: {
   userxx:'1111',

  },
  changeSum(){
    // this.data.userxx="changeSuccess",这种方法定义不辽的，不要用这个
    this.setData({
      userxx:"2222"
    })
  },

index.wxml

<button class="btn" bindtap="changeSum">简单的修改数据</button>
<view >{{userxx}}</view>

这是简单的button改数据。↑

下面说一下，input输入的数据来改视图，通过button点击

先说个简单的，input的数据直接获取！

getPhone: function (e) {
    var val = e.detail.value;
    this.setData({
      telphone: val
    });
  },

index.wxml

<input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" />
<view >{{telphone}}</view>

input的数据实时的显示出来！！

下面通过点击button获取 input的数据，到某个view中（不点不会显示）！

index.js

getPhone: function (e) {
    var val = e.detail.value;
    this.setData({
      telphone: val
    });
  },
  getInput: function () {
    var inp = this.data.telphone;
    this.setData({
      inputSum: inp
    });
  },

index.wxml

<input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" />
<button class="btn" bindtap="getInput">input数据来修改数据</button>
<view >{{inputSum}}</view>

步骤：

1. 把input的数据拿出来。放到telphone
2. 点击后，inputSum去拿telphone的数据。
3. 这只是获取到view，其实可以获取到api就可以调用数据。