小程序的数据绑定和事件绑定-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序的数据绑定和事件绑定。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序的数据绑定

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.查看绑定的效果

文章来源地址https://www.toymoban.com/news/detail-661920.html

将事件绑定的数据进行渲染并且同步(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
   })
  }
})

到了这里，关于小程序的数据绑定和事件绑定的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

小程序的数据绑定和事件绑定

小程序的数据绑定

小程序的事件绑定

常见的事件

事件对象的属性列表

将事件绑定的数据进行渲染并且同步(vue的v-model事件)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

type	事件类型
timeStamp	页面打开到触发事件所用的毫秒数
target	触发事件的组件的一些属性值集合(触发事件的源头组件)
currentTarget	当前组件的一些属性值集合(正在触发事件的组件)
detail	额外的信息
touches	触摸事件，当前停留在屏幕上触摸点信息的数组
changedTouches	触摸事件，当前变化的触摸点信息的数组