3.4 修改页面的data
Page.prototype.setData(Objectdata,Functioncallback)
setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)。
参数说明
字段 类型 必填 描述 最低版本
data Object 是 这次要改变的数据
callback Function 否 setData引起的界面更新渲染完毕后的回调函数 1.5.0
Object以key:value的形式表示,将this.data中的key对应的值改变成value。
其中key可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如array[2].message,a.b.c.d,并且不需要在this.data中预先定义。
注意:
直接修改this.data而不调用this.setData是无法改变页面的状态的,还会造成数据不一致。
仅支持设置可JSON化的数据。
单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
请不要把data中任何一项的value设为undefined,否则这一项将不被设置并可能遗留一些潜在问题。
示例代码:
< !--index.wxml-->
<view>
{{text}}
</view>
<button bindtap="changeText">Changenormaldata</button>
<view>
{{num}}
</view>
<button bindtap="changeNum">Changenormalnum</button>
<view>
{{array[0].text}}
</view>
<button bindtap="changeItemInArray">ChangeArraydata</button>
<view>
{{object.text}}
</view>
<button bindtap="changeItemInObject">ChangeObjectdata</button>
<view>
{{newField.text}}
</view>
<button bindtap="addNewField">Addnewdata</button>
下面是对应的js文件
Page({
data:{
text:'init data',
num:0,
array:[
{
text:'init data'
}
]
,object:{
text:'init data'
}
},
changeText:function(){
//this.data.text='changed data'//不要直接修改this.data
//应该使用setData
this.setData({
text:'changed data'
})
},
changeNum:function(){
//或者,可以修改this.data之后马上用setData设置一下修改了的字段
this.data.num=1 this.setData({
num:this.data.num
})
},
changeItemInArray:function(){
//对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject:function(){
this.setData({
'object.text':'changed data'
});
},
addNewField:function(){
this.setData({
'newField.text':'new data'
})
}
})