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>

1 
      7  8 
     16 
     
       使用对象 
     17 
     18 19 
     
        对象展开 
     20 
     21 22 条件渲染:23 
     
       1 
     24 
     
       2 
      25 
     
       3 
     26 27 
     
      28     
      
        1 
      29     
      
        2 
      30