Was passiert, wenn v-if und v-for in vue kombiniert werden?

Wenn v-if- und v-for-Anweisungen gleichzeitig verwendet werden: 1. v-if hat Vorrang. Wenn es falsch ist, wird das Element nicht gerendert. 2. Wenn v-if wahr ist, wird das Element gerendert iterativ nach v-for gerendert werden. Beispiel: v-if prüft item.visible, v-for iteriert Elemente und rendert item.name nur, wenn item.visible wahr ist.

v-if und v-for werden zusammen in Vue verwendet.

Wenn v-if und v-for-Anweisungen zusammen in Vue verwendet werden, geschieht Folgendes:

Priorität

v -if-Anweisung hat eine höhere Priorität. Das bedeutet, dass, wenn ein Element sowohl die Direktive v-if als auch die Direktive v-for hat, die Direktive v-if zuerst ausgeführt wird.

Rendering-Vorgänge

Wenn die v-if-Anweisung falsch ist, wird das Element nicht gerendert. Wenn die v-if-Direktive wahr ist, wird das Element basierend auf der v-for-Direktive gerendert.

Beispiel

Das folgende Beispiel zeigt, wie die Anweisungen v-if und v-for verwendet werden:

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

In diesem Beispiel:

<li>v-for-Anweisung iteriert über das Array items , für das Array Jedes Element im <li>-Element wird gerendert. items 数组，为数组中的每个元素渲染 <li> 元素。<li>v-if 指令检查 item.visible 属性。只有当 item.visible 为真时，<li> 元素才会被渲染。

因此，只有当 item.visible 为真时，才渲染显示 item.name 的 <li>v-if-Direktive prüft das Attribut item.visible. Das Element <li> wird nur gerendert, wenn item.visible wahr ist.

Daher wird der <li> von item.name nur dann gerendert, wenn item.visible wahr ist .code> Element. 🎜

Das obige ist der detaillierte Inhalt vonWas passiert, wenn v-if und v-for in vue kombiniert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!