微信小程序的页面渲染（if/for）

下面，粗略的介绍一下微信小程序的条件渲染、列表渲染、数据绑定等，详细的内容大家可以去看微信小程序的API,在此只做简单描述，希望能帮助到大家

条件渲染

<!--wxml-->

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>

<view wx:elif="{{view == 'APP'}}"> APP </view>

<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js

Page({

  data: {

    view: 'MINA'

  }

})

block wx:if

block和template差不多，在控制台不可见标签

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">

  <view> view1 </view>

  <view> view2 </view>

</block>

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

列表渲染

<!--wxml-->

1.<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>//自定义数组循环

<view wx:for="{{array}}"> {{item}} </view>

// page.js

Page({

  data: {

    zero：6，

    array: [1, 2, 3, 4, 5]

  }

})

2.此处的wx:for-item='newItem'可以不用相当于把item赋给newItem，

不写时下面的newItem.title换成item.title。此处的wx:for-index='id'其实就是每一个item的索引

<view>{{id+1}}.{{newItem.title}}</view>

<view>{{newItem.content}}</view>

</view>

数据绑定

<!--wxml-->

<view> {{message}} </view>

// page.js

Page({

  data: {

    message: 'Hello MINA!'

  }

})

对象解构：

模板：

此处的template是虚拟的标签，在控制台的标签元素是看不到的，所以向该标签

内写内容是无法显示的只能通过如下方法用is调用

1.1<!--wxml--><template name="staffName"><view>

    FirstName: {{firstName}}, LastName: {{lastName}}

  </view></template>

//表示控制以上name=staffName下的view的视图，其中data调用对象时用三个点表示

<template is="staffName" data="{{...staffA}}"></template>

<template is="staffName" data="{{...staffB}}"></template>

<template is="staffName" data="{{...staffC}}"></template>

// page.js

Page({

  data: {

    staffA: {firstName: 'Hulk', lastName: 'Hu'},

    staffB: {firstName: 'Shang', lastName: 'You'},

    staffC: {firstName: 'Gideon', lastName: 'Lin'}

  }

})

1.2//is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">

  <view> odd </view>

</template>

<template name="even">

  <view> even </view>

</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">

    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>

</block>

2. <templateis="objectCombine"data="{{for: a, bar: b}}"></template>

Page({

  data: {

    a: 1,

    b: 2

  }

})

最终组合成的对象是 {for: 1, bar: 2}

3. 如果对象的 key 和 value 相同，也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({

  data: {

    foo: 'my-foo',

    bar: 'my-bar'

  }

})

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}

秒客网