六、适合小白的小程序之input框的取值、赋值

首先呢,先附上代码,先看看代码。

取值:

1 <view class='sameBox'>
2   <view>
3     <text>*</text>会员账号:
4   </view>
5   <input type="text"  bindinput="memberAccountInput" name="memberAccount" value='{{accountVal}}' placeholder="请输入您的账号" />
6 </view>
1 memberAccountInput(e) {
2   this.setData({
3     memberAccount: e.detail.value
4   })
5 },
在此呢,有的可能还没明白,说话的取值呢?到底在哪里,别着急。
到这里呢,我们要取这个input的值了,就这句话就OK了,是的,拿的就是name属性的值。--- console.log(this.data.memberAccount)

赋值:

在data中设置一个名为accountVal的变量

data:{
  accountVal: '',      
}

然后呢,赋值即可(加粗部分)

app.wxRequest('POST', app.globalData.URL + '/aaa', 0, (res) => {
      console.log(res)
      if(res.status == 1){
        this.setData({
          accountVal : res.data
        })
      }else{
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
      console.log(this.data.memberAccount)
    }, (err) => {
      console.log(err.errMsg)
    });

上面的代码呢,bindinput是自带的事件方法(键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容),

详细了解官方介绍:https://developers.weixin.qq.com/miniprogram/dev/component/input.html

bindinput事件呢跟name属性组合使用,上面的代码呢大家也看了,也标有颜色区分。

红色的为input的取值方法,name呢是跟bindinput 事件组合使用,一便在事件触发时使用。

蓝色的就是赋值了,我们在做项目时候呢肯定需要后台的数据的,那么此时就需要赋值了,小程序的赋值呢,跟平常的使用差不多,定义变量,赋值变量。

到此呢,希望对大家有用吧。

原文地址:https://www.cnblogs.com/xintao/p/11216823.html