So verwenden Sie v-if in Vue-View.js-php.cn

So verwenden Sie v-if in Vue

WBOY

Freigeben： 2022-03-17 11:08:36

Original

52242 Leute haben es durchsucht

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"“.

So verwenden Sie v-if in Vue

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

So verwenden Sie v-if in Vue

(1) v- if application

<div id="app">
 <h2 v-if="true">{{message}}</h2>
</div>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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: &#39;#app&#39;,
        data: {
            isUser: true
        }
    })
</script>
</body>

Nach dem Login kopieren

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 Tutorial

》】

Das 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!