欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序基礎(chǔ)開發(fā)(三)----事件綁定 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

微信小程序基礎(chǔ)開發(fā)(三)----事件綁定

發(fā)表時間：2021-1-4

發(fā)布人：葵宇科技

瀏覽次數(shù)：105

1、定義一個num,然后新建一個輸入框,使兩邊的值能夠進行雙向綁定
.js

Page({
  data: {
    num: 0
  },
  //輸入框的input事件執(zhí)行邏輯
  handleInput(e) {
    this.setData({
      num: e.detail.value
    })
  }

})

.wxml

<!-- 1、需要給input標(biāo)簽綁定input事件  
       綁定關(guān)鍵字 bindinput
    2、通過事件源對象來獲取輸入框的值
       e.detail.value
    3、把輸入框的值賦值到data中
       this.setData({
           num:e.detail.value
       }) -->
<input type="text" bindinput="handleInput" />
<view>
    {{num}}
</view>

2、繼續(xù)加入點擊事件，進行簡單的加減
.wxml

<!-- 
    繼續(xù)加入一個點擊事件
       1、 bindtap,點擊事件
       2、無法在小程序當(dāng)中的事件直接傳參
       3、需要通過自定義屬性的方式傳遞參數(shù)
       4、事件源中獲取 自定義屬性
-->
    
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
    {{num}}
</view>

.js

Page({
  data: {
    num: 0
  },
  //輸入框的input事件執(zhí)行邏輯
  handleInput(e) {
    this.setData({
      num: e.detail.value
    })
  },
  //加  減按鈕的事件
  handletap(e){
  //獲取自定義屬性operation
  const operation = e.currentTarget.dataset.operation;
  this.setData({
    num:this.data.num + operation
  })
  }

})

總結(jié)：

1、通過bandinput給輸入框綁定
2、通過e.detail.value來獲取輸入框的值
3、通過this.setData({num:e.detail.value})將輸入框的值賦值到data中
4、通過bindtap給按鈕增加點擊事件
5、用自定義的屬性進行傳參
6、在事件源中獲取自定義屬性