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}}"> 1 </view>
<view wx:elif="{{length > 2}}" > 2 </view> 
<view wx:else> 3 </view>

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