0.6数据渲染

设置初始数据

每一个页面中都有一个.js 文件，该文件调用了一个 Page() 方法，传入一个对象，对象中有一个 data 属性，用来设置当前页面的数据：

Page({
    data: {
        swiperImages: [
            { id: 1, imageSrc: '/static/images/banner1.png' },
            { id: 2, imageSrc: '/static/images/banner2.png' },
            { id: 3, imageSrc: '/static/images/banner3.png' },
        ]
    }
})

渲染数据

在小程序中，标签内的文本内容和标签身上的属性，在做动态渲染时，都通过双大括号{{}}：

<text>{{swiperImages[0].imageSrc}}</text>
<image src="{{swiperImages[0].imageSrc}}"></image>

列表渲染

小程序中提供了 wx:for 来实现列表渲染。

<swiper>
    <swiper-item wx:for="{{swiperImages}}" wx:key="id">
        <image class="swiper-image" src="{{item.imageSrc}}"></image>
    </swiper-item>
</swiper>

swiperImages 是数据的数组名。遍历时，默认会将数组项赋值给一个 item 变量，数组项的下标赋值给一个 index 变量。

wx:key

每一个循环产生的元素身上，都需要添加一个 wx:key 属性，属性值是唯一的数字或字符串。

注意：

1. wx:key 的值不需要添加双大括号 {{}}；
2. wx:key 的值可以直接设置对象的属性名，不需要通过 对象.id 访问。

item 和 index 重命名

wx:for 中数组元素默认名为 item，可以通过 wx:for-item 更改数组元素的变量名。

wx:for 中数组下标默认名为 index，可以通过 wx:for-index 更改数组变量的变量名。

<swiper>
    <swiper-item wx:for="{{swiperImages}}" wx:key="id" wx:for-item="itemName" wx:for-index="idx">

    </swiper-item>
</swiper>

block

小程序中的 <block> 等同于 Vue 中的 <template>：

<block wx:for="{{[1, 2, 3]}}">
    <view> {{index}} </view>
    <view> {{item}} </view>
</block>

条件渲染

小程序中提供了以下三个属性实现条件渲染：

• wx:if
• wx:elif
• wx:else

所有的条件渲染属性都可以搭配 <block> 使用。

wx:if 和 hidden

<text hidden>123132</text>
<text wx:if="{{false}}">123132</text>

wx:if 和 hidden 区别就等同于 Vue 中 v-if 和 v-show 的区别。