1. wx:if

Dans les mini-programmes, l'utilisation de wx:if="{{condition}}" permet de déterminer si le bloc de code doit être rendu. On peut également utiliser wx:elif et wx:else pour ajouter des conditions else.

// pages/list/list.js
Page({
 data: {
   type: 1
 }
})

<view wx:if="{{type === 1}}"> Vrai </view>
<view wx:elif="{{type === 2}}"> Faux </view>
<view wx:else=""> 0 </view>

2. Utilisation de wx:if avec <block>

Pour contrôler l'affichage et le masquage de plusieurs composants en même temps, on peut utiliser une balise <block></block> pour envelopper plusieurs composants, et utiliser l'attribut wx:if sur la balise <block>.

<block wx:if="{{type === 1}}">
 <view> vue1 </view>
 <view> vue2 </view>
</block>

Note : <block> n'est pas un composant, c'est simplement un conteneur d'emballage qui ne rend rien dans la page.

3. hidden

Dans les mini-programmes, l'utiliastion directe de hidden="{{condition}}" permet également de contrôler l'affichage et le masquage des éléments.

// pages/list/list.js
Page({
 data: {
   flag: true
 }
})

<view hidden="{{flag}}"> L'élément est masqué lorsque la condition est true, sinon il est affiché</view>

4. Comparaison entre wx:if et hidden

(1) Méthode de fonctionnement différente

• wx:if contrôle l'affichage et le masquage des éléments en créant et en supprimant dynamiquement des éléments
• hidden contrôle l'affichage et le masquage des éléments en basculant le style (display:none/block)

(2) Recommandations d'utiilsation :

• Utiliser hidden pour les basculements fréquents
• Utiliser wx:if pour les conditions complexes

二、Rendu itératif

1. wx:for

Avec wx:for, on peut rendre en boucle des structures de composants répétitifs en fonction d'un tableau spécifié.

Par défaut, l'index de l'élément actuel dans la boucle est représenté par index, et l'élément actuel est représenté par item.

// pages/list/list.js
Page({
 data: {
   listeElements: [10, 20, 30, 40, 50]
 }
})

<view wx:for="{{listeElements}}">
 L'index est : {{index}}, l'élément est : {{item}}
</view>

2. Spécification manuelle des noms de variables pour l'index et l'élément

(Utilisé较少 dans le développement réel)

On peut utiliser wx:for-index pour spécifier le nom de variable de l'index de l'élément actuel dans la boucle

On peut utiliser wx:for-item pour spécifier le nom de varible de l'élément actuel

<view wx:for="{{listeElements}}" wx:for-index="idx" wx:for-item="element">
 L'index est : {{idx}}, l'élément est : {{element}}
</view>

3. Utilisation de wx:key

Similaire à :key dans le rendu de listes de Vue, les mini-programmes recommandent également de spécifier une valeur unique key pour les éléments de liste rendus afin d'améliorer l'efficacité du rendu.

// pages/list/list.js
Page({
 data: {
   utilisateurs: [
     {id: 1, nom: 'Alice'},
     {id: 2, nom: 'Bob'},
     {id: 3, nom: 'Charlie'},
   ]
 }
})

<view wx:for="{{utilisateurs}}" wx:key="id">{{item.nom}}</view>

Note : lors de la spécification de la clé, il n'est pas nécessaire d'envelopper avec la syntaxe Mustache, il suffit de remplir directement la valeur de clé correspondante.