微信小程序开发宝典：3条件与列表渲染

微信小程序开发宝典：3条件与列表渲染

参考文档:微信开放文档

一、条件渲染

1、wx:if的使用：在页面中我们可以直接使用wx:if进行判断后渲染，当属性为false时就不会渲染，而为true时就渲染

例子：

wxml：

<view wx:if="{
    {flag}}">渲染</view>

js：

    data: {
   
        flag: false,
    },

结果：

2、wx:if…wx:elif…wx:else的使用:在微信小程序中使用连续判断时，使用wx:elif而不是wx:elseif，在排除所有情况后的结果为wx:else

例子：

wxml:

<view wx:if="{
    {num > 10}}">大于10</view>
<view wx:elif="{
    {num > 5}}">大于5</view>
<view wx:else>小于5</view>

js:

    data: {
   
        flag: false,
        num: 10
    },

结果

3、使用条件对多组件控住判断,又不想影响布局，那需要用到block,bloclk并非组件标签，他是一个无生成的状态控住，不会有任何渲染

例子:

wxml:

<view wx:if="{
    {flag}}">渲染</view>
<view wx:if="{
    {num > 10}}">大于10</view>
<view wx:elif="{
    {num > 5}}">大于5</view>
<view wx:else>小于5</view>
<block wx:if="{
    {flag}}">
    <view>组件1</view>
    <view>组件2</view>
</block