小程序开发之数据绑定

数据绑定使用"Mustache"语法（双大括号）将变量包起来，可以作用于：

内容

 view {{ message }} /view 
Page({
 data: {
 message: #39;Hello MINA! #39;
})

组件属性(需要在双引号之内)

 view id= item-{{id}} /view 
Page({
 data: {
 id: 0
})

控制属性(需要在双引号之内)

 view wx:
= {{condition}} /view 
Page({
 data: {
 condition: true
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

 checkbox checked= {{false}} /checkbox 

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

运算

可以在{{}}内进行简单的运算，支持的有如下几种方式：

三元运算

 view hidden= {{flag ? true : false}} Hidden /view 

算数运算

 view {{a + b}} + {{c}} + d /view 
Page({
 data: {
 a: 1,
 b: 2,
 c: 3
})

view中的内容为3 + 3 + d

逻辑判断

 view wx:if= {{length 5}} /view 

字符串运算

 view {{ hello + name}} /view 
Page({
 data:{
 name: MINA 
})

数据路径运算

 view {{
object
}} {{
array
[0]}} /view 
Page({ data: {
 object: {
 key: #39;Hello #39;
 }, array: [ #39;MINA #39;]
})

组合

也可以在Mustache内直接进行组合，构成新的对象或者数组

数组

 view wx:
-items= {{[zero, 1, 2, 3, 4]}} {{item}} /view 
Page({
 data: {
 zero: 0
})

最终组合成数组[0, 1, 2, 3, 4]

对象

 template is= objectCombine data= {{for: a, bar: b}} /template 
Page({
 data: {
 a: 1,
 b: 2
})

最终组合成的对象是{for: 1, bar: 2}

也可以用扩展运算符...来将一个对象展开

 template is= objectCombine data= {{...obj1, ...obj2, e: 5}} /template 
Page({
 data: {
 obj1: {
 a: 1,
 b: 2
 obj2: {
 c: 3,
 d: 4
})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}

如果对象的key和value相同，也可以间接地表达

 template is= objectCombine data= {{foo, bar}} /template 
Page({
 data: {
 foo: #39;my-foo #39;,
 bar: #39;my-bar #39;
})

最终组合成的对象是{foo: my-foo , bar: my-bar }

注意：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如

 template is= objectCombine data= {{...obj1, ...obj2, a, c: 6}} /template 
Page({
 data: {
 obj1: {
 a: 1,
 b: 2
 obj2: {
 b: 3,
 c: 4
 a: 5
})

最终组合成的对象是{a: 5, b: 3, c: 6}

【相关推荐】

1. 微信小程序完整源码下载

2. 微信小程序游戏类demo挑选不同色块

3. 微信小程序demo：轮播图变换

以上就是小程序开发之数据绑定的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。