条件渲染

条件渲染主要用来控制页面结构的展示和隐藏,在微信小程序中实现条件渲染有两种方式：

使用 wx:if、wx:elif、wx:else 属性组
使用 hidden 属性

wx:if=""

wx:elif=""

wx:else

hidden

1<!-- 单分支 -->
2<view wx:if="{{ age >= 18 }}">成年</view>
3
4<!-- 双分支 -->
5<view wx:if="{{ age >= 18 }}">成年</view>
6<view wx:else>未成年</view>
7
8<!--多分支 -->
9<view wx:if="{{ age>=0 &&  age<14 }}">未成年</view>
10<view wx:elif="{{ age>=14 &&  age<18 }}">青少年</view>
11<view wx:elif="{{ age>=18 &&  age<35 }}">青年</view>
12<view wx:elif="{{ age>=35 &&  age<=120  }}">中年</view>
13<view wx:else>年龄不合法</view>

1<!-- hidden本身是隐藏的意思,跟我们以前的v-show逻辑是相反的 -->
2<view hidden="{{false}}">这个是显示</view>
3<view hidden="{{true}}">这个是隐藏</view>

wx:if 和 hidden 二者的区别：

wx:if ：当条件为 true 时将内容渲染出来,否则元素不会进行渲染,通过移除/新增节点的方式来实现
hidden ：当条件为 true 时会将内容隐藏,否则元素会显示内容,通过 display 样式属性来实现的

wx:if与hidden的对比

运行方式不同
- wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏
- hidden以切换样式的方式（display:none / block）,控制元素的显示与隐藏
使用建议
- 频繁切换时,建议使用hidden
- 控制条件复杂时,建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

条件渲染#

条件渲染