Rendu conditionnel complet du mini programme en dix minutes

Cet article vous apporte des connaissances pertinentes sur le WeChat Mini Program, qui présente principalement le contenu pertinent sur le rendu conditionnel. Le soi-disant rendu conditionnel consiste à déterminer s'il faut restituer le code sur la page d'affichage. , j'espère que cela aidera tout le monde.

1.wx:if implémente le rendu conditionnel

Dans le framework, utilisez wx:if="" pour déterminer si le bloc de code doit être rendu : 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的值就可以改变页面渲染的内容。

2.block结合wx:if使用

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block></block> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

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

注意：不是一个组件，只是一个包裹性的容器，不会在页面上做任何渲染。

下面做一个演示：在<block></block>中包裹两个view组件，使用wx:if来决定是否需要渲染这两个组件。


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

3.hiden实现条件渲染

在框架中，使用 hidden="" 来控制组件的显示与隐藏。与前面不同的是，hidden组件始终会被渲染，只是简单的控制显示与隐藏。

<view>当条件为true时则会隐藏该元素</view>

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


可以在AppData中改变flag的值从而控制是否隐藏该view组件。

4. wx:if vs hidden

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

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

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:ifrrreee

If condition est vraie, le composant de vue sera rendu sur la page, sinon le composant ne sera pas affiché. En même temps, il peut également être utilisé en combinaison avec wx:elif et wx:else. À ce stade, plusieurs conditions peuvent être utilisées pour déterminer s'il faut restituer le. code.

rrreee

Faisons une démonstration : définissons un type dans les données du fichier js, et définissons trois types dans le wxml file Le composant de vue détermine s'il faut restituer le composant de vue en fonction de la valeur de type.
🎜🎜À ce stade, modifiez la valeur du type Vous peut modifier le contenu du rendu de la page. 🎜

🎜🎜2.block est utilisé conjointement avec wx:if 🎜🎜Parce que wx:if est un attribut de contrôle et doit être ajouté à un étiquette. Si vous souhaitez déterminer plusieurs balises de composants à la fois, vous pouvez utiliser une balise <block></block> pour envelopper plusieurs composants et utiliser l'attribut de contrôle wx:if ci-dessus. . 🎜rrreee🎜Remarque : Ce n'est pas un composant, c'est juste un conteneur d'emballage et ne fera aucun rendu sur la page. 🎜

🎜Faisons une démonstration : enveloppez deux composants view dans <block></block> et utilisez wx:if code> pour décider si ces deux composants doivent être rendus. <br><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/067/26f15617cc5eaa265907c965be777bb7-3.png" class="lazy" alt="Insérer la description de l'image ici"><br> <br> À ce moment sur la page Deux composants <code>view sont rendus et block, en tant que conteneur d'encapsulation, n'est pas rendu. 🎜

🎜🎜3.hiden implémente le rendu conditionnel🎜🎜Dans le framework, utilisez hidden="" pour contrôler l'affichage et le masquage des composants. Contrairement au précédent, le composant masqué sera toujours rendu et ce n'est qu'un simple contrôle à afficher et à masquer. 🎜rrreee

🎜Faisons une démonstration : définissez un flag dans le fichier js et utilisez hiddenwxml /code>Masquer le composant de vue.


Peut être trouvé dans AppData pour contrôler s'il faut masquer le composant de vue. 🎜

🎜🎜4. wx:if vs caché🎜🎜Parce que le modèle dans wx:if peut également contenir une liaison de données, donc quand wx:if est commutée, le framework a un processus de rendu partiel, car il garantira que le bloc conditionnel est détruit ou restitué lors du changement. 🎜🎜En même temps, wx:if est également paresseux. Si la condition de rendu initiale est fausse, le framework ne fait rien et ne démarre le rendu partiel que lorsque la condition devient vraie pour la première fois. 🎜🎜En comparaison, hidden est beaucoup plus simple. Le composant sera toujours rendu, et il contrôle simplement l'affichage et le masquage. 🎜🎜De manière générale, wx:if a un coût de commutation plus élevé et hidden a un coût de rendu initial plus élevé. Par conséquent, si des changements fréquents sont nécessaires, il est préférable d'utiliser hidden, et s'il est peu probable que les conditions changent au moment de l'exécution, wx:if est préférable. 🎜🎜【Recommandations d'apprentissage associées : 🎜Tutoriel d'apprentissage du mini programme🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!