微信小程序(三)-事件绑定

小程序事件绑定

https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html

1.数据

// pages/story/story.js
Page({
  data: {
    num:0
  },
  // 输入框的input事件的执行逻辑,将输入的值赋值给num
  handleInput(e){
   this.setData({
     num:e.detail.value
   })
  },
  // 加减按钮事件的逻辑
  handletap(e){
    // 获联自定义属性 operation 传递过来的参数1或-1
    console.log(e)  // 查看传入参数的位置
    const operation = e.currentTarget.dataset.operation;
    // 赋值给num
    this.setData({
      num:this.data.num+operation
    })
  }
})

story.js

 2.页面

<!--pages/story/story.wxml-->
<text>小区趣事</text>
<view>------------------------</view>
<!-- 事件绑定 双向绑定占击案例
1.给input标签绑定事件,绑定关键字 bindinput"输入事件名"
2.通过事件来获取输入框中的值(e.datail.value)
3.把输入框的值赋值到data当中,
  1.不能直接写 this.data.num = e.detail.value
              this.num = e.detail.value
  2.正确的写法
    this.setData({
      num:e.detail.value
    })
4.绑定击事件
  1.关键字 bindtap="点击事件名" 绑定点击事件
  2.自定义属性传递参数 关键字 data-属性名
  3.事件源中获取自定义属性 data-operation
-->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

story.wxml

微信小程序(四)-样式 WXSS