微信小程序如何绑定数据

Wxml页面的动态数据，都是来自js文件Page的data，数据绑定就是通过大括号将变量包起来，在wxml页面将数据显示出来。

 

（1）组件属性绑定

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

 

（2）控制属性绑定

用来进行if语句条件判断，如果满足条件，则执行，否则不执行

<view wx:if=”{{condition}}”> </view>   Page({ data:{ condition:true } })

 

（3)关键字绑定

关键字绑定常用于组件的一些关键字，像复选框组件一样，checked关键字如果true，则代表选中，反之则不选中。

<checkbox checked=”{{false}}”> </checked>

（4）运算

（4.1）三元运算：

<view hidden=”{{flag?true:false}}”> </view>

 

（4.2)数学运算

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

 

（4.3)逻辑运算

<view hidden=”{{length > 5}}”> </view>

 

（4.4)字符串运算

<view>{{“hello” + name}}</view>   Page({     data:{     name:’mike’ } })

 

（4.5)数据路径运算

<view>{{object.key }} {{array[0]}}</view>   Page({     data:{ object:{ key:’hello’ }, array:[‘mike’] } })