Bootstrap

微信小程序中的两类渲染:条件渲染、列表渲染

1.微信小程序条件渲染
(1)wx:if判断单个组件
在微信小程序框架里,使用wx:if=”{ {contition}}”来判断是否需要渲染该代码块。

<view wx:if = “{
  {condition}}”> True </view>
<view wx:if = “{
  {length >5}}”> 1 </view>
<view wx:else = “{
  {length >2}}”> 2 </view>
<view wx:else> 2 </view>

(2)block wx:if判断多个组件
如果我们想一次性判断多个组件标签,可以使用一个标签将多个组件包装起来,并在上面使用wx:if控制属性。

<block wx:if = “{
  {true}}”>
   <view> view1 </view>
   <view>view2 </view>
</block>

注意:不是一个组件,它仅仅是一个包装元素,不是在页面做任何渲染,只接受控制属性。

2.微信小程序列表渲染
(1)wx:for列表渲染单个组件
在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

<view wx:for = “{
  {array}}”>
     {
  {index}}:{
  {i
;