【愚公系列】2022年10月 微信小程序-优购电商项目-⼩程序事件的绑定

2022-11-02 17:47:42 浏览数 (1)

文章目录

  • 前言
  • 一、 条件渲染
    • 1. wxml
    • 2. page
    • 3. 特别注意

前言

⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等 不同的组件⽀持不同的事件,具体看组件的说明即可。

一、 条件渲染

1. wxml

代码语言:javascript复制
<input bindinput="handleInput" />

2. page

代码语言:javascript复制
Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})

3. 特别注意

1、绑定事件时不能带参数 不能带括号 以下为错误写法

代码语言:javascript复制
<input bindinput="handleInput(100)" />

2、事件传值 通过标签⾃定义属性的⽅式 和 value

代码语言:javascript复制
<input bindinput="handleInput" data-item="100" />

3、事件触发时获取数据

代码语言:javascript复制
 handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 输入框的值
   console.log(e.detail.value);
 }

0 人点赞