day02 | 条件渲染

1.wx:if

在小程序中，使用wx:if="{{condition}}" 来判断是否需要渲染该代码块：

也可以用wx:elif和 wx:else来添加 else 判断：

<!-- 条件渲染 -->
<!-- index.wxml -->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

<!-- index.js -->
Page({
    data: {
        type: 2
    }
})

== 与 === 区别

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。

举例说明：

"1" == true类型不同，"=="将先做类型转换，把true转换为1，即为 "1" == 1；此时，类型仍不同，继续进行类型转换，把"1"转换为1，即为 1 == 1。

1.如果比较："1" === true 左侧为字符型，右侧为bool布尔型或int数值型，左右两侧类型不同，结果为false；

2.如果比较： 1 === 1 左侧为int数值型，右侧为int数值型，左右两侧类型相同，数值大小也相同，结果为true；

3.如果比较： 1 === 2 左侧为int数值型，右侧为int数值型，左右两侧类型相同，但数值大小不同，结果为false。

2.结合 <block> 使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在<block> 标签上使用 wx:if 控制属性，示例如下：

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

<block wx:if="{{false}}">
    <view>view1</view>
    <view>view2</view>
</block>

注意：

<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

3.hidden

在小程序中，直接使用hidden="{{condition}}" 也能控制元素的显示与隐藏：

<view hidden="{{flag}}">条件为 true 的时候隐藏元素，否则显示</view>

4.wx:if 与 hidden 的对比

1. 运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 以切换样式的方式（display:none/block;），控制元素的显示与隐藏

2. 使用建议

频繁切换时，建议使用 hidden

控制条件复杂时，建议使用 wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换