wxml解析

一、数据绑定

　　wxml中的动态数据均来自于对应js文件中的Page的data，在js中访问Page的data用this.data， 改变data中某个属性的值用setData()方法。

　　Page({

　　　　data: {

　　　　　　id: 0,

　　　　　　message: "hello",

　　　　　　condition:true

　　　　}

　　})

　　简单绑定：

　　　　数据绑定使用Mustache语法(双大括号)将变量包起来

　　　　<view> {{message}} </view>

　 　作用与组件属性:

　　　　<view id="item-{{id}}" </view>

　　作用于控制属性：

　　　　<view wx:if="{{condition}}"> </view>

　　运算:

　　　　三元运算: <view hidden="{{flag?true: false}}" > hidden </view>

　　　　算术运算: <view {{a + b}} + {{c}} + d </view>

　　逻辑运算:

　　　　<view wx:if="{{ length > 5 }}" > </view>

　　字符串运算:

　　　　<view> {{"message" + name }} </view>

二、wxml 组合

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

　　<view wx:for="{{[zero, 1, 2, 3]}}" > {{item}} </view>

 <template name="objectCombine">
     <view>
         <text> {{for}} </text>
         <text> {{bar}} </text>
     </view>
 </template>

 <template name="objectCombine">
     <view>
         <text> {{a}} </text>
         <text> {{b}} </text>
         <text> {{c}} </text>
         <text> {{d}} </text>
     </view>
 </template>
 <text> 使用对象 </text>
 <template is="objectCombine" data="{{for: a, bar: b}}"> </template>

 <text>  对象展开 </text>
 <template is="objectCombine2" data="{{...obj1, ...obj2, e: 5}}"> </template>

 条件渲染:
 <view wx:if="{{length > 1}}">  </view>
 <view wx:elif="{{length > 2}}" >  </view>
 <view wx:else>  </view>

 <block wx:if="{{length >1 }}"">
     <view>  </view>
     <view>  </view>
 </block>