So verwenden Sie v-if in der v-for-Schleife in vue.js 2

Question

Ich habe dieses Code-Setup

<div v-for="person in persons">
    <div v-if="person.status == 'public'" :key="person.id">
        Hi,my name is {{person.name}}
    </div>
    <div v-else :key="person.id">
        This person is private
    </div>
</div>

person 对象中的 status Alle Werte von Eigenschaften sind „öffentlich“!

Aber im obigen Snippet ist es nicht der if 块，而是 else-Block, der weiterläuft.

Wenn ich den Code so umschreibe:

<div v-for="person in persons" :key="person.id">
    <div v-if="person.status == 'public'">
        Hi,my name is {{person.name}}
    </div>
    <div v-else>
        This person is private
    </div>
</div>

Dann wird es normal funktionieren.

Was stimmt mit dem ersten Clip nicht?

Sieht so aus, als ob das „Schlüssel“-Attribut dabei eine Rolle spielt. Ist die Art und Weise, wie ich es verwende, falsch? Warum wirkt es sich auf die Ausgabe aus?

Welche davon ist die korrekteste Art, eine „if“-Anweisung innerhalb einer „for“-Schleife zu schreiben?

Ich habe die erste Methode bereits in anderen Schleifen in meinem Code verwendet und hatte bis heute kein Problem. Muss ich sie alle aktualisieren, damit sie der zweiten Methode ähneln, um seltsames Verhalten wie dieses zu vermeiden?

Answer 1

来自 vue v-for 与 v-if

您正确使用了 v-for 和 v-if。问题在于 :key 被放在条件块上。

无论哪种方式，某些内容都会在 div 中呈现，您有两种可能的结果，并且关键应该在 v-for 线上。您不应有条件地呈现 :key 属性。

// 1
<div>
   <div>
      Hi,my name is john
   </div>
</div>

// 2
<div>
  <div>
     This person is private
  </div>
</div>