微信小程序云开发教程-WXML入门-条件渲染
发布于 4 年前 作者 rhan 1375 次浏览 来自 分享

同学们大家好,我是小伊同学,今天我们一起来学习WXML部分的条件渲染。


  在wxml中,想要控制组件的显示隐藏,就需要用到条件渲染,通过使用 wx:if 属性对变量进行判断,如果变量为真则显示这个组件,否则不显示。



  例如,在第二行的代码中,通过这样的语法,我们可以动态决定是否显示这个view组件。


  同时我们可以用 wx:elif 和 wx:else 来添加一个 else 块,例如第二部分的代码块,这里实际上就是我们常用的if else语句。借助这个例子来说明,如果length变量的值大于5,那么第一个view显示,第二个view使用了elseif,那么判断的条件变成了当length不大于5并且大于2时,第二个view才会显示,实际上和前一个if语句构成了if else的选择关系。最后一句view就变成了如果length不满足大于5也不满足大于2时才会显示的组件了。


  这就是条件渲染的基本使用方法,此外,如果要一次性判断多个组件标签,可以使用一组   标签将多个组件包装起来,并在这个标签上使用 wx:if 控制属性。


  在右边的例子中,如果花括号中为true,那么view1和view2都显示,如果为false,则都不显示。这种方式和将组件放在一个view的内容中,然后对这个整体的view进行条件渲染的效果是一样的,只不过这里的  并不是一个组件,它仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性


  请大家回忆一下,我们之前讲组件的属性时是不是讲过一个hidden属性呢?通过控制这个属性也能够控制组件的隐藏和显示,那么这两种方式有什么区别?这个问题留给大家课后思考,同学们也可以通过微信开发者文档学习这个问题。


  好了,本节课的内容到此结束,下一节我们将进入wxss样式的学习,来让我们的小程序更加美观漂亮。

回到顶部