微信小程序 基础 - 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

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

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

2. 保留关键字 *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>