Que se passe-t-il lorsque v-if et v-for sont combinés dans vue ?

Lorsque les instructions v-if et v-for sont utilisées en même temps : 1. v-if est prioritaire s'il est faux, l'élément ne sera pas rendu ; 2. Si v-if est vrai, l'élément le sera. être rendu itérativement selon v-for. Exemple : v-if vérifie item.visible, v-for itère les éléments et ne restitue item.name que lorsque item.visible est vrai.

v-if et v-for sont utilisés ensemble dans Vue

Lorsque les instructions v-if et v-for sont utilisées ensemble dans Vue, ce qui suit se produit :

Priorité

v -si la directive a une priorité plus élevée. Cela signifie que si un élément a à la fois les directives v-if et v-for, la directive v-if sera exécutée en premier.

Opérations de rendu

Si la directive v-if est fausse, l'élément ne sera pas rendu. Si la directive v-if est vraie, l'élément sera rendu en fonction de la directive v-for.

Exemple

L'exemple suivant montre comment utiliser les directives v-if et v-for :

<code class="html"><template>
  <ul>
    <li v-for="item in items" v-if="item.visible">
      {{ item.name }}
    </li>
  </ul>
</template></code>

Dans cet exemple :

<li>la directive v-for parcourt le tableau items , pour le tableau Chaque élément de l'élément <li> est rendu. items 数组，为数组中的每个元素渲染 <li> 元素。<li>v-if 指令检查 item.visible 属性。只有当 item.visible 为真时，<li> 元素才会被渲染。

因此，只有当 item.visible 为真时，才渲染显示 item.name 的 <li>La directive v-if vérifie l'attribut item.visible. L'élément <li> ne sera rendu que si item.visible est vrai.

Par conséquent, seulement lorsque item.visible est vrai, le <li> de item.name sera rendu .code> élément. 🎜

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!