本文为您带来了微信applet的相关知识，主要介绍了条件渲染的相关内容。所谓条件渲染，就是判断代码是否应该渲染到显示页面。让我们看看。我希望它能对你有所帮助。

使用框架 wx:if="" 判断是否需要渲染代码块：

<view>True<view></view></view>

如果condition的值为true，则view组件将在页面上渲染，否则将不会显示该组件。它还可以与wx结合:elif和wx:使用else时，可以多条件判断是否渲染代码。

<view>组件1</view><view>组件2</view><view>组件3</view>

在js文件的data中定义type，在wxml文件中定义三个view组件，并根据type的值确定是否渲染view组件。此时，更改type的值可以更改页面渲染的内容。

因为 wx:if 它是一个需要添加到标签上的控制属性。如果你想一次判断多个组件标签，你可以使用一个 包装多个组件并在上面使用标签 wx:if 控制属性。

<block>
??<view>?view1?</view>
??<view>?view2?</view></block>

注意：它不是一个组件，而是一个包装容器，不会在页面上渲染任何东西。

下面是一个演示：在两个view组件用wx包裹在中间:if决定是否需要渲染这两个组件。


此时页面上渲染了两个view组件，block作为包裹容器没有渲染。

使用框架 hidden="" 控制组件的显示和隐藏。与前面不同的是，hidden组件总是被渲染，只是简单地控制显示和隐藏。

<view>当条件是true时，元素会被隐藏起来</view>

下面是一个演示：在js文件中定义flag，在wxml文件中使用hidden隐藏view组件。


可在AppData中更改flag值，以控制view组件是否隐藏。

因为 wx:if 模板也可能包含数据绑定，所以当 wx:if 在切换条件值时，框架有一个局部渲染过程，因为它可以确保条件块在切换过程中被销毁或重新渲染。

同时 wx:if 也是惰性的，如果初始渲染条件是 false，框架什么都不做，局部渲染只有在条件第一次变成真实时才开始。

相比之下，hidden 要简单得多，组件总是会被渲染，只是简单的控制显示和隐藏。

一般来说，wx:if 切换消耗更高 hidden 初始渲染消耗较高。因此，如果需要频繁切换，则使用它 hidden 更好的是，如果条件在运行过程中不太可能改变， wx:if 较好。

【相关学习推荐:小程序学习教程】

以上是十分钟内完成小程序条件渲染的详细内容。请关注其他相关文章！