Vue verbirgt Urteilsaussagen

Das Ausblenden von Urteilsaussagen in Vue ist eine der in der Entwicklung häufig verwendeten Techniken, mit denen der Code prägnanter und klarer gestaltet werden kann. In diesem Artikel werden drei versteckte Urteilsaussagen vorgestellt, die häufig in Vue verwendet werden.

1. v-if

v-if ist die am häufigsten verwendete versteckte Beurteilungsaussage in Vue. Sie beurteilt anhand des wahren oder falschen Ausdrucks, ob ein Element wiedergegeben wird. Wenn der Ausdruck wahr ist, wird das Element gerendert, andernfalls wird es nicht gerendert.

Das Syntaxformat von v-if lautet wie folgt:

<div v-if="flag">Hello,Vue!</div>

Flag ist dabei ein boolescher Datentyp.

v-if hat auch eine abgeleitete Anweisung v-else, die zum Rendern von Elementen verwendet wird, wenn der v-if-Ausdruck falsch ist. v-else und v-if müssen eng verwendet werden und das Format lautet wie folgt:

<div v-if="flag">条件为真</div>
<div v-else>条件为假</div>

Eine andere Situation besteht darin, dass wir, wenn der Ausdruck von v-if falsch ist, möglicherweise nicht möchten, dass das Element vollständig entfernt wird, dies aber tun möchten Um Elemente im DOM beizubehalten, können Sie die v-show-Direktive verwenden.

2. v-show

v-show wird auch verwendet, um das Anzeigen und Ausblenden von Elementen basierend auf dem wahren oder falschen Ausdruck zu steuern, unterscheidet sich jedoch von v-if darin, dass v unabhängig vom wahren oder falschen Ausdruck ist - show entfernt niemals Elemente.

Das Syntaxformat von v-show ist wie folgt:

<div v-show="flag">Hello,Vue!</div>

3. Die v-for-Anweisung kann ein Array oder Objekt durchlaufen und jedes darin enthaltene Element in die Vorlage rendern. Wenn es sich bei den durchquerten Daten um ein Array handelt, lautet das Syntaxformat von v-for wie folgt:

<ul>
  <li v-for="(item,index) in list">{{item}}</li>
</ul>

Unter diesen repräsentiert item jedes durchquerte Element und index repräsentiert die Indexposition des durchquerten Elements.

Wenn es sich bei den durchlaufenen Daten um ein Objekt handelt, lautet das Syntaxformat von v-for wie folgt:

<ul>
  <li v-for="(value,key) in obj">{{key}} : {{value}}</li>
</ul>

Dabei repräsentiert der Wert jeden Attributwert im Objekt und der Schlüssel jeden Attributnamen.

Es ist wichtig zu beachten, dass es bei Verwendung der V-for-Schleife am besten ist, jedem durchlaufenen Element einen eindeutigen Schlüsselwert hinzuzufügen, um die Rendering-Leistung zu verbessern.

Zusammenfassung

Anhand der obigen Einführung können wir sehen, dass versteckte Urteilsaussagen in Vue sehr praktisch sind und unseren Code prägnanter und klarer machen können. Unter diesen sind v-if, v-show und v-for die drei am häufigsten verwendeten versteckten Beurteilungsanweisungen. Eine kompetente Verwendung kann die Entwicklungseffizienz verbessern.

Das obige ist der detaillierte Inhalt vonVue verbirgt Urteilsaussagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!