微信小程序-WXML包装元素

!> <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性，条件渲染默认只能控制被添加条件属性的那个组件，如果多个组件需要同时被控制，我们就可以使用 block，普通的组件上可能需要添加很多属性，如果再把条件渲染或者列表渲染同时添加到上面会导致我们代码的可读性很差。

好了接下来先看一个示例，往 index.js 添加一个person属性数据：

person: {
  name: 'BNTang',
  age: 21,
  gender: 'male',
  score: 100
}

index.wxml:

<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.gender}}</view>
<view>{{person.score}}</view>

根据我如上提供的代码，我想要这些信息在分数为100分的时候我才显示这些数据，这个时候呢，我们的代码就改进为了如下:

index.wxml:

<view wx:if="{{person.score===100}}">{{person.name}}</view>
<view wx:if="{{person.score===100}}">{{person.age}}</view>
<view wx:if="{{person.score===100}}">{{person.gender}}</view>
<view wx:if="{{person.score===100}}">{{person.score}}</view>

发现冗余代码太多了，我又进行改造，可以在最外层添加一个view来包裹一下，把条件渲染判断添加到包裹的view上即可，然后代码又进行了改造：

index.wxml:

<view wx:if="{{person.score===100}}">
  <view>{{person.name}}</view>
  <view>{{person.age}}</view>
  <view>{{person.gender}}</view>
  <view>{{person.score}}</view>
</view>

好了经过我们如上这么多的改造，我们先来看看渲染之后的结构代码，发现我们多渲染了一个包裹的view组件:

那么我们来使用block来看看效果：

block 就是一个包装元素，是不会进行实际的渲染组件内容的，然后我们将控制属性编写到block，关于元素的样式等类名属性编写到视图组件，这样就有利于我们的代码阅读性，例如如下代码：

<view class="test" id="demo">
  <block wx:if="{{person.score===100}}">
    <view>{{person.name}}</view>
    <view>{{person.age}}</view>
    <view>{{person.gender}}</view>
    <view>{{person.score}}</view>
  </block>
</view>