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

小程序事件绑定

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

上一篇:linux常用命令-文件搜索命令-locate,which,whereis,grep


下一篇:这里主要展示在Win7下怎么用IIS发布局域网站