数据绑定
WXML页面里的动态数据，都是来自js文件Page的data ，而数据绑定就是通过双大括号( {{ }} )将变量包起来，在WXML页面里将 数据值显示出来。
1。组件属性绑定，它是将data里的数据绑定到小程序的组件上。

2.控制属性绑定：它用来进行if语句条件判断，如果条件满足，则执行 ，否则不执行

3.关键字绑定： 常用于组件的一些关键字像复选框组件一样，checked关键字如果等于true，则代表复选框选中；如果等于false，则代表
不选中复选框
示例代码： <checkbox checked=“{{ false }}”>
注意：不要直接写checked = “false”，其计算结果是一 个字符串，转成boolean类型后代表真值。
4.运算：可以在{{ }}内进行简单的运算，小程序支持以下几种运算
1.三元运算。<view hidden=“{{ flag ? true : false }}”>Hidden
2.数学运算 {{ a+b }} + {{ c }} + d
Page({ data: { a:1, b:2, c:3 } }) view中的内容为 3 + 3 + d
3逻辑判断 5 }}”>
4.字符串运算{{ “hello”+ name }}
Page({ data: { name: ‘微信小程序!’ } })
5.数据路径运算。{{ object.key }} {{ arrar[0] }}
Page({ data: { object: { key:‘微信小程序!’ }, array: [‘hello’] } })

条件渲染
1.wx:if判断单个组件，在小程序框架里，使用wx:if=“{{ condition }}”来判断 是否需要渲染该代码块，可以使用wx:elif和wx:else来添加一个
else块：
5 }} ”> 1
2 }} ”> 2
3
2.block wx:if判断多个组件，wx:if是一个控制属性，需要将它添加到一个标签上。
如果想一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上面使用wx:if控制属性 。
示例代码： <block wx:if=“{{ true }}”>
view1
view2
不是一个组件，它仅是一个包装元素，不会在页面做任何渲染，只接受控制属性

列表渲染
1.在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据 重复渲染该组件
1.数组当前项的下标变量名默认为index ?数组当前项的变量名默认为item ，使用wx:for-item可以指定数组当前元素的变量 名
1.使用wx:for-index可以指定数组当前下标的变 量名
示例代码： <view wx:for=“{{ array }}” wx:for-index=“idx” wx:for-item=“itemName”> {{ idx }}: {{ itemName.message }} </view>
2.block wx:for列表渲染多个组件
，如果想渲染一个包含 多节点的结构块，这时wx:for需要应用在 标签上
示例代码： <block wx:for=“{{ [1,2,3]}}”> <view> {{ index }} : </view> <view> {{ item }} </view> </block>
3.wx:key指定唯一标识符
如果列表中项目的位置会动态改变或有新的项目添 加到列表中，并且希望列表中的项目保持自己的特 征和状态，
如 中的输入内容 的选中状态 需要使用wx:key来指定列表中项目的唯一标识符
wx:key的值以以下两种形式提供
1.字符串：代表在for循环的array中item的某个property ，该property的值需要是列表中唯一的字符串或数字，且 不能动态改变

保留关键字：
2.*this代表在for循环中的item本身，这种表示需要item本身是一 个唯一的字符串或者数字
3.当数据改变触发渲染层重新渲染的时候，会校正带有key的组件
4.框架会确保它们被重新排列，而不是重新创建，以确保组件保持 自身的状态，并且提高列表渲染时的效率
如不提供wx:key，会报一个warning，如果明确知道该列表是静态 的，或者不必关注其顺序，可以选择忽略。

定义模板
WXML提供模板(template)功能:可以把一些共用的、复用的代码，在模板中定义代码片段 在不同的地方调用，以达到一次编写，多次直接使用的效果

WXML提供两种文件引用方式：
1.import可以在该文件中使用目标文件定义的template
假如在item.wxml中定义了一个叫item的template
示例代码如下：

<!-- item.wxml -->
<template name=“item”> 
<text> {{ text }} </text> <
/template> 

在index.wxml中引用了item.wxml，就可以使用item模板 示例代码如下：

<import src=“item.wxml”/> 
<template is=“item” data=“{{ text:‘import引用’}}” />

2.include可以将目标文件除了的整个代码引入相当于是复制到include位置
示例代码如下：

 <!-- index.wxml -->
  <include src=“header.wxml”/> 
  <view>页面主体</view> 
  <include src=“footer.wxml”/>
<!-- header.wxml --> 
<view>头文件</view>
<! -- footer.wxml -- > 
<view>尾文件</view>