基本信息

---

下载

文档摘要

---

微信小程序开发

北方工业大学

案例

条件渲染

案例描述

编写一个利用wx:if实现颜色显示的小程序。

当wx:if放在view中并通过js文件传递一种颜色时，

窗口将显示该颜色名称和颜色。当wx:if放在

block中并传递给变量length的值大于10时，将在窗

口下方显示红、绿、蓝三种颜色条，否则将不

显示。

实现效果

案例实现

电脑录屏

知识要点

wx:if

在框架中，使用wx:if=“{{condition}}”

来判断是否需要渲染该代码块，例如：

viewwx:if={{condition}}True/view

知识要点

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

例如：

viewwx:if={{length5}}1/view

viewwx:elif={{length2}}2/view

viewwx:else3/view

知识要点

blockwx:if

因为wx:if是一个控制属性，需要将它添加到一个标签

上。如果要一次性判断多个组件标签，可以使用一个

block/标签将多个组件包装起来，并在上边使用

wx:if控制属性。

知识要点

例如：blockwx:if={{true}}

viewview1/view

viewview2/view

/block

注意：

block/并不是一个组件，它仅仅是一个包装元素，

不会在页面中做任何渲染，只接受控制属性。

案例

总结知识要点

?使用wx:if=“{{condition}}”来判断是否

需要渲染代码块的方法

?使用block/将多个组件包装起来，

并在上边使用wx:if控制属性的实现

方法。