【小程序开发笔记】WXML入门

一. 列表渲染
在组件里使用 wx:for控制属性绑定一个数组
默认数组的当前下标变量名默认为index,数组当前项内容为item

JS：

    data: {
        "array":[{"msg":"11"},{"msg":"22"},{"msg":"33"}]
    },

前端：

<view wx:for="{{array}}">
    <text>{{index}} \t</text>
    <text>{{item.msg}}</text>
</view>

可以使用 wx:for-item="xxx" 和 wx:for-index="xxx" 用来修改循环的变量名

<view wx:for="{{array}}" wx:for-item="it" wx:for-index="idx">
    <text>{{idx}} \t</text>
    <text>{{it.msg}}</text>
</view>

二. 条件渲染

1. 使用 wx:if="{{condition}}" 控制是否渲染

    <view wx:if="{{ length > 5 }}">1</view>
    <view wx:elif="{{length >= 3 }}">2</view>
    <view wx:else>3</view>

2. 使用block 控制多个组件

   <block wx:if="{{条件}}">
   <view>1</view>
   <view>2</view>
   <view>3</view>
   </block>