赣南脐橙

佰草伐

导航

setData 机制

解释:setData 函数,用于将数据,从逻辑层发送到视图层,当开发者调用 setData 后,数据的变化,会引起视图层的更新。
参数说明

属性类型是否必填描述
data Object 这次要改变的数据
callback Function setData引起的界面更新渲染完毕后的回调函数

说明:

  • Object 以key: value的形式表示,将this.data中的key对应的值改变成value
    key可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如array[2].messagea.b.c.d,并且不需要在 this.data中预先定义;
  • 直接修改this.data而不调用this.setData是无法改变页面的状态的,还会造成数据不一致;
  • 仅支持设置可 JSON 化的数据;
  • 请不要把data中任何一项的value设为undefined,否则将会有一些潜在问题出现;
  • data 的键名必须遵守 camelCase (驼峰式)的命名规范,不得使用 kebab-case (短横线隔开式)规范。

示例代码:
在开发者工具中预览效果

<!-- index.swan -->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>

<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>

<view>{{arr[0].text}}</view>
<button bindtap="changeItemInArr"> Change Arr data </button>

<view>{{obj.text}}</view>
<button bindtap="changeItemInObj"> Change Obj data </button>

<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
// index.js
Page({
data: {
text: 'init data',
num: 0,
arr: [{text: 'init data'}],
obj: {
text: 'init data'
}
},
changeText() {
// 不要直接通过 this.data.text = 'changed data' 修改this.data,应该使用 setData
this.setData({
text: 'changed data'
});
},
changeNum() {
// 或者,可以修改 this.data 之后马上用 setData 设置一下修改了的字段
this.data.num = 1
this.setData({
num: this.data.num
});
},
changeItemInArr() {
// 对于对象或数组字段,可以直接修改一个子字段,这样方式会有带来更好的性能
this.setData({
'arr[0].text':'changed data'
});
},
changeItemInObj(){
this.setData({
'obj.text': 'changed data'
});
},
addNewField() {
this.setData({
'newField.text': 'new data'
});
}
});

posted on 2019-08-30 17:39  佰草伐  阅读(438)  评论(0编辑  收藏  举报

自定义导航网站

php基础知识

Wood Furniture