Heim > Artikel > Web-Frontend > So verwenden Sie v-if in Vue
So verwenden Sie v-if in Vue
- WBOYOriginal
- 2022-03-17 11:08:3652390Durchsuche
In Vue wird „v-if“ verwendet, um DOM-Elemente entsprechend dem wahren oder falschen Ausdruck zu bedienen. Sie können die Anzeige und das Ausblenden von Elementen umschalten, wenn der Wert des Ausdrucks wahr ist und das Element im Dom-Baum vorhanden ist , und der Ausdruck ist Wenn falsch, wird das Element aus dem DOM-Baum entfernt und die Syntax ist „v-if="expression"“.
Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.
Verwendung von v-if in vue
v-if: Schalten Sie die Anzeige und das Ausblenden von Elementen (Bedienung von DOM-Elementen) entsprechend dem wahren oder falschen Ausdruck (Bedienung von DOM-Elementen) um
(1) v- if application
<div id="app">
<h2 v-if="true">{{message}}</h2>
</div>Daten werden nur angezeigt, wenn sie wahr sind
(2) v-if und v-else
<div id="app">
<h2 v-if="false">{{message}}</h2>
<h1 v-else>hello</h1>
</div>Wenn v-if wahr ist, führen Sie if aus, andernfalls führen Sie else aus
( 3) Fall: v - Anwendung von if und v-else
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="isUser=!isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>Klicken Sie, um den Typ zu wechseln, um den Anzeigeinhalt zu ändern. Zu diesem Zeitpunkt tritt ein Problem bei der Wiederverwendung von Eingabe-Tags auf (der Inhalt im Eingabefeld ist nicht vorhanden). Dies ist ein virtuelles DOM. Die Wiederverwendung vorhandener Elemente anstelle der Erstellung neuer Elemente kann die Leistung verbessern. Wenn die Schlüssel identisch sind, bleibt der Inhalt erhalten , der Inhalt wird nicht beibehalten. [Verwandte Empfehlungen: „
vue .js TutorialDas obige ist der detaillierte Inhalt vonSo verwenden Sie v-if in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!