数据动态绑定

// .js
 data:{
    url:'https://img0.baidu.com/it/u=2301353428,260634576&fm=253&fmt=auto&app=120&f=JPEG?w=333&h=500'
 }
// wxml 
 <text>{{url}}</text>
 <image src="{{url}}" mode="widthFix"></image>

为data里面的值重新赋值

// .js
data: {
    num:1,
},
clickBtn:function(){
    this.setData({
      num:this.data.num+1
    })
}
// wxml
<text>{{num}}</text>
<button bindtap="clickBtn">点击+1</button>

数据同步（双向绑定）

// .js
data: {
    num:2,
},
inputText:function(e){
    this.setData({
      num:e.detail.value
    })
}
// wxml
<text>{{num}}</text>
<input type="text" bindinput="inputText" value="{{num}}"/>

事件绑定（bind事件名/bind:事件名）

// .js
clickBtn:function(event){
    console.log(event)
}
// wxml
<button bindtap="clickBtn">点击</button>

为事件处理函数传递参数

// .js
clickBtn:function(e){
   console.log(e.target.dataset.n) //1
}
// wxml
<button bindtap="clickBtn" data-n="{{1}}">点击</button>

事件对象event详细属性

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

条件渲染

// .js
data: {
  sex:0,
}
// wxml
<view wx:if="{{sex==1}}">男</view>
<view wx:elif="{{sex==2}}">女</view>
<view wx:else>保密</view>

hidden (通过样式来控制元素是否隐藏)

// .js
data: {
  flag:false
}
// wxml
<view hidden="{{flag}}">条件为真隐藏</view>

列表渲染（对象也可以用wx:for）

// .js
data: {
  arr:['苹果','香蕉','菠萝','火龙果']
}
// wxml
1. 基础的列表渲染
<view wx:for="{{arr}}" wx:key="index">
  索引index：{{index}},当前项元素item为:{{item}}
</view>
2. 手动指定索引和当前项的变量名
<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="v" wx:key="i">
  索引index：{{i}},每一项元素item为:{{v}}
</view>