2.1模板语法——数据绑定，列表渲染，条件渲染

数据绑定

WXML中的数据都来自对应的js文件中的Page中的data属性

Page({
  data: {
    message:"hello wx"
  }
})

使用Mustache 语法进行数据绑定

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

如果需要在属性中使用时也需要使用Mustache 语法，如下：

<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> </view>
<checkbox checked="{{false}}"> </checkbox>

如果需要数据进行运算时

三目运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}}  </view>
逻辑运算
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view>

列表渲染

使用wx-for实现

数组

books:[
      {
        id:1,
        name:"weixin"
      },
      {
        id:2,
        name:"qq"
      },
      {
        id:3,
        name:"zhifubao"
      }
    ]

实现方式：默认wx:for-item=“item” ，wx:for-index=“index”

<view wx:for="{{books}}">{{index}}:{{item.name}}</view>

可以设置名字，当有多层列表渲染时，设置名字是必须的

<view 
wx:for="{{books}}" 
wx:for-item="itemset" 
wx:for-index="indexsetting">
{{indexsetting}}:{{itemset.name}}</view>

wx：key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供

1，字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2，保留关键字， *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
如下使用字符串

<view 
wx:for="{{books}}" 
wx:for-item="itemset" 
wx:for-index="indexsetting" 
wx:key="id">
{{indexsetting}}:{{itemset.name}}
</view>

如下使用保留关键字

<view 
wx:for="{{books}}" 
wx:for-item="itemset" 
wx:for-index="indexsetting" 
wx:key="*this">
{{indexsetting}}:{{itemset.name}}
</view>

条件渲染

wx-if，wx-else

Page({
  data: {
    bool:true
  }
})

<view wx:if="{{bool}}">if</view>
<view wx:else>else</view>

wx-if，wx-elif，wx-else

Page({
  data: {
    num:11
  }
})

<view wx:if="{{num>20}}">20</view>
<view wx:elif="{{num>15}}">15</view>
<view wx:elif="{{num>10}}">10</view>
<view wx:else>else</view>

hidden属性

<view hidden="{{true}}">hidden true</view>
<view hidden="{{false}}">hidden false</view>

if-else与hidden的区别

hidden表示display：none而if-else并没有在wxml文档中
所以当不是频繁切换显示时优先使用wx-if，直接把标签从页面结构中移除
当频繁切换时，优先使用给hidden，通过使用display：none来判断显示与否。
所以hidden不要和样式一起使用，样式会将hidden中的display：none覆盖