午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

微信小程序input獲取輸入,如何獲取參數

發(fa)布時間:2021-06-25 10:52 所屬欄目:小程序開發教程

通常使用(yong)的是(shi)input的綁定方法

bindinput="userInput"
 
綁定的方法如下,通過e攜帶的detail.value獲取用戶的輸入
 
 userInput(e) {
       this.setData({
           name : e.detail.value,
      })
  }

 
e為該方法觸發返回節點攜帶的參數,如果你想知道e是什么可以將起打印處理
 
1. console.log(e)
 
頁面input組件綁定獲取方法
<input class='name'  bindinput="userInput" maxlength="3" value="{{name}}" placeholder="輸入商品的名稱"></input>
 
那么對于頁面很多的input,是否需要每一個輸入對應一個方法呢?
 
其實只要一個就可以了,獲取對應的參數和用戶的值即可
獲取值的方式是e.detail.value;
 
獲取參數的方式呢?其實可以給input攜帶參數id
<input class='name'  bindinput="userInput"  
id='name' 
 maxlength="3" value="{{name}}" placeholder="輸入商品的名稱"></input>
<input class='price'  bindinput="userInput"  
id='price' 
 maxlength="3" value="{{price}}" placeholder="輸入商品的價格"></input>
 
獲取節點對應的id為 e.target.id
 
這時上面的方法可以寫成
 
userInput(e) {
      let id = e.target.id;
       this.setData({
          [id] : e.detail.value,
     })
  }

 
或是這樣
 
 userInput(e) {
       this.setData({
          [e.target.id] : e.detail.value,
      })
  }

 
這時同一個方法就可以分別獲取到商品的name和price輸入的值了
 
如果是要提交一個表單呢,所有參數都需要整個提交參數
 
這時提交時希望直接提交一個參數,而不是要整合,可以把所有參數加到一個對象內即可,那如何獲取呢?
 
 
 this.setData({
        'args.id':   290
 })

 
通過上面的方式可以使data內的args的屬性id的值為290
 
那么就可以改進上面的方式獲取表單的值
<input class='name'  bindinput="userInput" id='args.name' maxlength="3" value="{{args.name}}" placeholder="輸入商品的名稱"></input>
<input class='price'  bindinput="userInput" id='args.price' maxlength="3" value="{{args.price}}" placeholder="輸入商品的價格"></input>
 
通過
 
userInput(e) {
       this.setData({
          [e.target.id] : e.detail.value,
      })
  }

 
獲取到用戶輸入的值直接存入args對象中
 
 
args : {
     name: '金鑼',
      price: '23.99'
}

 
可以通過控制臺查看參數變化

 

 當(dang)然

<textarea  placeholder="輸入商品的名稱" maxlength="60"  bindinput="userInput"  id='args.name'  value="{{args.name}}"> </textarea>
也適用


易優小程序(企業版)+靈(ling)活api+前后代碼(ma)開(kai)源 碼云倉庫:
本文地址://www.jinyoudianli.com/wxmini/doc/course/26737.html 復制鏈接 如需(xu)定(ding)制請聯系易(yi)優客服(fu)咨詢:

工作日 8:30-12:00 14:30-18:00
周六及部分節假日提供值班服務

易小優
轉人(ren)工(gong) ×