微信小程序 基础 - 05 （wxml语法：动态数据绑定）
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
如果列表项的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
- 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
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>