Explication détaillée du rendu conditionnel dans le développement de mini-programmes

wx:if

Dans le framework, nous utilisons wx:if="{{condition}}" pour déterminer si le bloc de code doit être rendu :

<view wx:if="{{condition}}"> True </view>

Vous pouvez également utiliser wx:elif et wx:else pour ajouter un bloc else :

<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>

block wx:if

Parce que wx:if est un attribut de contrôle , il doit être ajouté à une balise. Mais si nous voulons évaluer plusieurs balises de composants à la fois, nous pouvons utiliser une balise 2b5957c2850173214f4ea7f1261e9a0f pour envelopper plusieurs composants et utiliser les attributs de contrôle wx:if dessus.

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view></block>

Remarque : 2b5957c2850173214f4ea7f1261e9a0f n'est pas un composant, c'est juste un élément d'habillage qui ne fera aucun rendu sur la page et n'accepte que les attributs de contrôle.

wx:if vs caché

Parce que le modèle dans wx:if peut également contenir une liaison de données, donc quand wx:if Quand la condition lorsque la valeur change, le framework dispose d'un processus de rendu local, car il garantira que le bloc de condition 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 démarre le rendu partiel lorsque la condition devient vraie pour la première fois.

En revanche, caché est beaucoup plus simple. Le composant sera toujours rendu, et ce n'est qu'un simple contrôle à afficher et à masquer.

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 commutations fréquentes sont nécessaires, il est préférable d'utiliser caché, et s'il est peu probable que les conditions changent pendant l'exécution, wx:if est préférable.

[Recommandations associées]

1. Téléchargez le code source complet du mini-programme WeChat

2 Démo du mini-programme WeChat : carrousel. transformation d'image

3. Démo du mini-jeu du programme WeChat, sélectionnez différents blocs de couleurs

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!