1 通过初始数据绑定
小程序页面第一次渲染的时候会使用初始数据和渲染层进行绑定,所谓的初始数据就是Page页面构造器中的data对象。
例如在page页面构造器中的data对象有以下数据:
Page({
/**
* 页面的初始数据
*/
data: {
name:'Trevor',
age:23,
sex:'boy'
}
})
这样小程序会将初始数据绑定到对应的WXML中
<view>{{name}}</view>
<view>{{age}}</view>
<view>{{sex}}</view>
2 通过setData函数将数据从逻辑层发送到视图层
函数形式:
Page.prototype.setData(Object data, Function callback)
字段 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
data | Object | 是 | 这次要改变的数据 | |
callback | Function | 否 | setData引起的界面更新渲染完毕后的回调函数 | 1.5.0 |
注意:
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,因为
setData
函数是异步的将数据从逻辑层发送到视图层,同时改变对应的this.data
的值,而this.date是不会将修改的数据传到视图层的。 - 仅支持设置可 JSON 化的数据。
- 单次设置的数据不能超过1024kB。
使用案例
修改个人信息,将
Trevor lily
23 修改为为: 22
boy girl
Page({
/**
* 页面的初始数据
*/
data: {
name:'Trevor',
age:23,
sex:'boy'
},
changeInfo:function(){
this.setData({
name: 'lily',
age: 22,
sex: 'girl'
})
}
})
在WXML中添加button,并绑定changeInfo事件
<button bindtap='changeInfo'>修改信息</button>
<view>{{name}}</view>
<view>{{age}}</view>
<view>{{sex}}</view>