微信小程序开发项目实战（微课版）课件 2-4 课件-条件渲染.pptx

项目二小程序编程基础任务四条件渲染MiniProgram

在微信小程序中，条件渲染是一种非常实用的技术，它允许我们根据条件来决定是否显示某个组件或页面。通过条件渲染，开发者可以动态地呈现用户界面，根据用户的输入、数据或其他条件来做出相应的调整。Next》条件渲染简介

在框架中，使用wx:if=来判断是否需要渲染该代码块：Next》wx:if的使用viewwx:if={{condition}}Helloworld/view也可以用wx:elif和wx:else来添加一个else块：viewwx:if={{length5}}1/viewviewwx:elif={{length2}}2/viewviewwx:else3/view

wx:if的使用示例代码效果如下图所示。

因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个block/标签将多个组件包装起来，并在上边使用wx:if控制属性。Next》blockwx:if的使用block/并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性blockwx:if={{true}}viewview1/viewviewview2/view/block

blockwx:if的使用示例代码效果如下图所示。

在框架中，使用wx:if=来判断是否需要渲染该代码块：Next》wx:if的使用viewwx:if={{condition}}Helloworld/view也可以用wx:elif和wx:else来添加一个else块：viewwx:if={{length5}}1/viewviewwx:elif={{length2}}2/viewviewwx:else3/view

hidden也可以用来控制元素的显示与隐藏，与wx:if不同，当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。Next》hidden的使用view?hidden={{flag}}?flag为true值时，隐藏评论/viewPage({??data:?{????flag:true??}})在JS中定义flag的值

blockwx:for的使用运行结果如下所示。

花括号和引号之间如果有空格，将最终被解析成为字符串。Next》blockwx:for的使用viewwx:for={{[1,2,3]}}{{item}}/viewviewwx:for={{[1,2,3]+}}{{item}}/view等同于

blockwx:for的使用运行结果如下所示。

感谢观看THANK项目二小程序编程基础