微信小程序2-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45707027/article/details/113755227

本文介绍了微信小程序中如何实现事件绑定，特别是input事件的双向数据绑定，以及如何通过自定义属性传递参数并处理加减操作。详细步骤包括绑定input事件、获取输入值、将值存入data并结合bindtap事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序2

- 事件绑定

事件绑定

简单双向绑定官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

<!-- 
  1 需要给input标签绑定 input事件
    绑定的关键是 bindinput
  2 如何获取 输入框的值
   通过事件源对象e来获取
 -->

demon04.wxml文件

<input type="text" bindinput="handleInput"  />

demon04.js文件

Page({
  data: {
  },
  handleInput(e){
    console.log(e);
  }
})

在这里插入图片描述
输入12，观察调试器知文本框值在detail的value中

修改demon04.js文件

Page({
  data: {
  },
  handleInput(e){
    console.log(e.detail.value);
  }
})

输入123
在这里插入图片描述
demon04.js文件

Page({
  data: {
    num:0
  },
  handleInput(e){
    this.setData({
      num:e.detail.value
    })
  }
})

demon04.wxml文件

<!-- 
  1 需要给input标签绑定 input事件
    绑定的关键是 bindinput
  2 如何获取 输入框的值
   通过事件源对象e来获取
    e.detail.value
  3 把输入框的值 赋值到data当中
    不能直接
     1 this.data.num=e.detail.value
     2 this.num=e.detail.value
    正确写法
    this.setData({
      num:e.detail.value
    })
 -->

<input type="text" bindinput="handleInput"  />
<view>
  {{num}}
</view>

在这里插入图片描述

  4 需要加入一个点击事件
    1 bindtap
    2 无法在小程序当中的 事件中 直接传参
    3 通过自定义属性的方式来传递参数
    4 事件源中获取自定义属性
      e.currentTarget.dataset.operation

demon04.wxml文件

<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
  {{num}}
</view>

demon04.js文件

Page({
  data: {
    num:0
  },
  handleInput(e){
    //console.log(e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  //加 减 按钮的事件
  handletap(e){
    //console.log(e);
    //获取自定义属性operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num:this.data.num+operation
    })
  }
})

在这里插入图片描述