动态数据渲染

一、设置数据初始值

WXML 中的动态数据均来自对应 .js 文件中的 data 属性。
例如，我们在轮播图组件中设置一个 swiperData来保存首页轮播图的初始数据：

Component({
     data: {
         swiperData: [
             { _id: 1, imagePath: '' },
             // ...
         ]
     }
 })

二、修改数据

小程序中修改 data 中的数据，需要通过 this.setData() 来实现：

Component({
    data: {
        swiperData: [
            { _id: 1, imagePath: '' },
            // ...
        ]
    },
    methods: {
        getSwiperData() {
            // ... 
            this.setData({
                swiperData: []
            })
        }
    }
})

三、渲染数据

1、渲染为文本内容

如果只是将数据渲染为纯文本内容，可以直接在标签中通过 {{}} 的形式（同 Vue 一样）。

 <text>{{msg}}</text>

2、渲染为组件属性

如果在小程序中需要将动态数据设置为标签身上的一个属性，也是通过 {{}} 来实现的（这一点和 Vue 不同）。

 <image src="{{item.image_src}}"></image>

四、列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

 <swiper-item wx:for="{{swiperData}}" wx:key="_id">
     <image src="{{item.image_src}}"></image>
 </swiper-item>

wx:key

小程序中通过 wx:for 渲染出来的组件，需要通过 wx:key 设置一个唯一的 key 值。设置时需要注意：

1. key 的值不需要通过 {{}} 包裹；
2. key 的值可以设置数据的属性名，不需要通过.操作；

   <swiper-item wx:for="{{swiperData}}" wx:key="_id"></swiper-item>

   block

   小程序中的 block 标签和 Vue 中的 template 标签作用一样，都是用来表示一个虚拟标签，节点渲染完成后不会存在于页面中。

   五、条件渲染

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

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

  <swiper class="swiper" autoplay circular interval="3000" duration="1000">
    <block wx:for="{{swiperData}}" wx:key="_id">
        <swiper-item  wx:if="{{item.isShow}}">
            <!-- <image src="{{item.imagePath}}"></image> -->
            <text>{{index}}</text>
        </swiper-item>
    </block>
  </swiper>