上一篇:小程序学习笔记-4:页面之间跳转
本篇内容
* 使用假数据的方式完成数据绑定
小程序中的数据绑定
WXML 中的动态数据均来自对应 Page 的 data。使用 Mustache 语法(双大括号)将变量包起来,{{}}中可以放置变量、运算、组合(生成新的对象或数组)。
<!--变量-->
<view> {{ message }} </view>
<!--运算-->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!--组合-->
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
message: 'Hello MINA!',
flag: true,
zero: 0
}
}
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
wx:key 可以指定列表中项目的唯一的标识符
响应的数据绑定
数据绑定后,在逻辑层修改数据,视图层会响应更新。在逻辑层修改数据需要使用setData。
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
只需要设置变化的值即可,无需重复设置其他值,小程序会自动合并更新。
this.setData({
message: 'Bye, MINA!'
})
注意:
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
仅支持设置可 JSON 化的数据。
单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。
总结:
本篇学习记录了微信小程序中的数据绑定。
参考:
小程序官方文档-框架-WXML语法参考
小程序官方文档-框架-框架-框架接口-页面-Page-setData