微信小程序开发入门（十一）

使用 wx:if=“{{condition}}” 来判断是否需要渲染代码块

使用<block/>将多个组件包装起来，并在上边使用 wx:if 控制属性

<!--pages/index/index.wxml-->
<view style='margin:20px;text-align:center;'>
  利用view中的wx:if进行条件渲染
  <view wx:if="{{color=='red'}}">红色</view>
  <view wx:elif="{{color=='green'}}">绿色</view>
  <view wx:elif="{{color=='blue'}}">蓝色</view>
  <view wx:else>其他颜色</view>
  <view class='view-item' style="background-color:{{color}}"></view>
</view>

<view style='margin:20px;text-align:center;'>
  利用block中的wx:if进行条件渲染
  <block wx:if="{{length > 10}}">
    <view class='view-item bc-red'>红色</view>
    <view class='view-item bc-green'>绿色</view>
    <view class='view-item bc-blue'>蓝色</view>
  </block>
</view>

/* pages/index/index.wxss */

.view-item {
  width: 100%;
  height: 50px;
}

.bc-red {
  background-color: red;
}

.bc-green {
  background-color: green;
}

.bc-blue {
  background-color: blue;
}

// pages/index/index.js

Page({
  data: {
    color: 'pink',  //初始化color的值
    length: 5 //初始化length的值
  }
})

wx:if 

　　在框架中，使用 wx:if=“{{condition}}”  来判断是否需要渲染该代码块，例如： <view wx:if="{{condition}}">True</view> 

　　也可以用 wx:elif 和 wx:else 来添加一个 else 块， 例如： 

　　　　<view wx:if="{{length > 5}}">1</view> 如果length值>5时，显示1

　　　　<view wx:elif="{{length > 2}}">2</view>如果length值>2时，显示2

　　　　<view wx:else>3</view> 否则显示3

block wx:if 

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

　　例如： 

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

　　<view>view1</view> 

　　<view>view2</view> 

　　</block> 

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