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

小程序的数据绑定

        1.需要渲染的数据放在index.js中的data里

Page({
  data: {
    info:'HELLO WORLD',
    imgSrc:'/images/1.jpg',
    randomNum:Math.random()*10,
    randomNum1:Math.random().toFixed(2)
  },
})

        2.在WXML中通过{{}}获取数据

 {{info}}
 
 {{randomNum >= 5 ? '大于等于5' : '小于5'}}
 {{randomNum1 * 100}}

小程序的数据绑定和事件绑定_第1张图片

 小程序的数据绑定和事件绑定_第2张图片

小程序的事件绑定

        什么是事件:渲染层到逻辑层的通讯方式,将用户在渲染层的行为传递到逻辑层

       常见的事件     

  • tap(触摸后离开)
  • input(文本框输入) 
  • change(状态改变)

        通过bind来绑定事件

bindtap/bind:tap

     事件对象的属性列表

        事件回调触发时,会收到一个事件对象event,它的属性如下所示

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

        1.给组件绑定事件

        2.点击组件触发的事件

Page({ 
  btnHandler(e){
     console.log(e)
  }
})

        3.查看绑定的效果小程序的数据绑定和事件绑定_第3张图片

 

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

        1.创建一个共享的数据

Page({ 
  data:{ 
    msg:"你好"
  }, 

}) 

        2.将input组件绑定一个事件  syn并渲染数据

         {{}}  获取数据

        3.在js中编写syn的事件,将数据进行同步 

         this.setData     给数据重新进行赋值

Page({ 
  data:{ 
    msg:"你好"
  }, 
  syn(e){
   this.setData({
     msg: e.detail.value
   })
  }
})

 

小程序的数据绑定和事件绑定_第4张图片小程序的数据绑定和事件绑定_第5张图片

 

你可能感兴趣的:(小程序,微信小程序)