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就可以调用数据。

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

上一篇:微信小程序 云开发 数据库 请求数据


下一篇:微信小程序动态显示标签文字或者按钮文字