数据绑定

（1）数据绑定

页面数据如下

Page({
  data: {
    info:'hello world'
  }
})

页面结构如下

<view>{{info}}</view>

（2）属性值绑定

页面数据如下

Page({
  data: {
     imgSrc:"https://bkimg.cdn.bcebos.com/pic/0eb30f2442a7d9334c218e0fab4bd11372f001c4"
  }
})

页面结构如下

<image src="{{imgSrc}}"></image>

（3）三元运算

页面数据如下

Page({
  data: {
    randomNum:Math.random()*10
  }
})

页面结构如下

<view>{{randomNum>=5 ? '大于等于5' : '小于5'}}</view>

（4）事件绑定

（5）bindtap的语法格式

页面数据如下

Page({
  data: {
   
  },

  btnTapHandler(e){
    console.log(e)
  },

})

页面结构如下

<button type="primary" bindtap="btnTapHandler">触摸事件按钮</button>

 （6）在事件处理函数中为 data 中的数据赋值

页面数据如下

Page({
  data: {
   count:0,
  },

    coountChange(){
    this.setData({
      count:this.data.count+1
    })
  },

})

页面结构如下

<button type="primary" bindtap="coountChange">+1</button>

（7）事件传参

 

页面数据如下

Page({
  data: {
   count:0,
  },

  btnTap2(e){
    this.setData({
      count:this.data.count+e.target.dataset.add
    })
  },

})

页面结构如下

<button type="primary" bindtap="btnTap2" data-add="{{2}}">+2</button>

（8）bindinput的语法

 

页面数据如下

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

  inputHandler(e){
    //取最新文本框的值
    console.log(e.detail.value)
    this.setData({
      msg:e.detail.value
    })
  },

})

页面结构如下

<input value="{{msg}}" bindinput="inputHandler"></input>