小程序的数据绑定
1.需要渲染的数据放在index.js中的data里
Page({ data: { info:'HELLO WORLD', imgSrc:'/images/1.jpg', randomNum:Math.random()*10, randomNum1:Math.random().toFixed(2) }, })
2.在WXML中通过{{}}获取数据
<view>{{info}}</view> <image src="{{imgSrc}}" mode="widthFix"></image> <view>{{randomNum >= 5 ? '大于等于5' : '小于5'}}</view> <view>{{randomNum1 * 100}}</view>
小程序的事件绑定
什么是事件:渲染层到逻辑层的通讯方式,将用户在渲染层的行为传递到逻辑层
常见的事件
- tap(触摸后离开)
- input(文本框输入)
- change(状态改变)
通过bind来绑定事件
bindtap/bind:tap
事件对象的属性列表
事件回调触发时,会收到一个事件对象event,它的属性如下所示
|----------------|----------------------------|
| type | 事件类型 |
| timeStamp | 页面打开到触发事件所用的毫秒数 |
| target | 触发事件的组件的一些属性值集合(触发事件的源头组件) |
| currentTarget | 当前组件的一些属性值集合(正在触发事件的组件) |
| detail | 额外的信息 |
| touches | 触摸事件,当前停留在屏幕上触摸点信息的数组 |
| changedTouches | 触摸事件,当前变化的触摸点信息的数组 |1.给组件绑定事件
<button type="primary" bindtap="btnHandler">按钮</button>
2.点击组件触发的事件
Page({ btnHandler(e){ console.log(e) } })
3.查看绑定的效果
将事件绑定的数据进行渲染并且同步(vue的v-model事件)
1.创建一个共享的数据
Page({ data:{ msg:"你好" }, })
2.将input组件绑定一个事件 syn并渲染数据
{{}} 获取数据
<input value="{{msg}}" bindinput="syn"/>
3.在js中编写syn的事件,将数据进行同步
this.setData 给数据重新进行赋值
Page({ data:{ msg:"你好" }, syn(e){ this.setData({ msg: e.detail.value }) } })
小程序的数据绑定和事件绑定
流殇꧂2023-08-22 18:44
相关推荐
战神刘玉栋3 小时前
《微信小程序实战(2) · 组件封装》人工智能的苟富贵7 小时前
微信小程序中的实时通讯:TCP/UDP 协议实现详解李宥小哥7 小时前
微信小程序04-常用API上程序员阿龙7 小时前
计算机毕业设计之:教学平台微信小程序(Jiaberrr8 小时前
教你如何在微信小程序中轻松实现人脸识别功能qq_2338594312 小时前
微信getUserProfile不弹出授权框Jiaberrr20 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)h1771134720521 小时前
单身狗的逆袭之路之开发相亲交友系统李宥小哥1 天前
微信小程序05-常用API下李宥小哥1 天前
微信小程序06-综合项目点餐系统