wxml是一套标签语言，符合标签语言的相关语法， 用于定义页面结构。而如果涉及到在wxml中展示动态数据，就需要结合js文件中在data里声明的变量，来动态处理。这些动态数据大致包括：动态文本、动态属性、动态样式等。
Page({data:{name: 'zs',age: 16,xxxx: xxx}})
wxml需要获取动态数据时，可以使用{{ }}，常见的需求有一下几大类：
1、内容绑定
动态更新组件的内容文本：
<text>{{name}}</text><text>{{age}}</text>
2、属性绑定
动态更新组件的属性值：
Page({data:{url: '/images/1.jpg',num: 1,showbar: true}})
<image src="{{url}}"></image><image src="/images/{{num}}.jpg"></image><scroll-view show-scrollbar="{{showbar}}"></scroll-view>
3、样式绑定
动态更新组件的wxss样式
Page({data:{className: 't2',c: 'red',bw: 1}})
<text class="{{className}}"></text><text style="color:{{c}}; border:{{bw}}px solid {{c}};"></text>
4、列表渲染
基于小程序提供的列表渲染语法，可以动态的输出列表数据。类似vue中的v-for
Page({data:{goods:[ {id:1001, name:'叫花鸡', price:28.8},{id:1002, name:'鱼香肉丝', price:38.8},{id:1003, name:'宫保鸡丁', price:21.8} ]}})
VUE中的v-for，列表渲染语法如下：
<div v-for="(item, i) in goods" :key="i">编号: {{item.id}}菜品: {{item.name}}价格：{{item.price}}</div>
小程序中使用wx:for来实现列表渲染，语法如下：
<div wx:for="{{goods}}" wx:key="id">编号: {{item.id}}菜品: {{item.name}}价格：{{item.price}}</div>
item与index两个变量，是wx:for内置变量。 我们还可以自定义变量名，修改遍历过程中描述每一个对象和索引的变量名：
<div wx:for="{{goods}}" wx:key="id" wx:for-item="cp" wx:for-index="i">{{i}}编号: {{cp.id}}菜品: {{cp.name}}价格：{{cp.price}}</div>
wx:key
如果列表项的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。
wx:key的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
5、条件渲染
使用条件渲染可以动态处理是否渲染某个元素。类似vue中的v-if。例如：
data:{islogin: true}
<text wx:if="{{islogin}}">欢迎：xxx</text><text wx:else>登录、注册</text>
条件渲染的常见写法如下：
<text wx:if="{{条件表达式}}"></text>-------------------------------------------------<text wx:if="{{条件表达式}}"></text><text wx:else></text>-------------------------------------------------<text wx:if="{{条件表达式}}"></text><text wx:elif="{{条件表达式}}"></text><text wx:elif="{{条件表达式}}"></text><text wx:elif="{{条件表达式}}"></text><text wx:else></text>
