So verwenden Sie v-show und v-if in Vue, um eine dynamische Seitenwiedergabe zu erreichen

Vue ist ein beliebtes JavaScript-Framework zum Erstellen dynamischer Webanwendungen. v-show und v-if sind beides Anweisungen in Vue zum dynamischen Rendern von Ansichten. Sie können uns helfen, eine bessere Kontrolle über die Seite zu haben, wenn DOM-Elemente nicht angezeigt oder ausgeblendet werden. In diesem Artikel wird ausführlich erläutert, wie Sie mit V-Show- und V-IF-Anweisungen in Vue eine dynamische Seitenwiedergabe erreichen.

Die v-show-Direktive in Vue

v-show ist eine Direktive in Vue, die Elemente basierend auf dem Wert eines Ausdrucks dynamisch anzeigt oder ausblendet. Bei v-show wird das Element immer im DOM gerendert und zur Steuerung des Ein- oder Ausblendens wird nur CSS verwendet.

Die v-show-Direktive kann auf folgende Arten verwendet werden:

<template>
  <div>
    <h1 id="Dynamic-Title">Dynamic Title</h1>

    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true
    }
  },
  methods: {
    toggleTitle() {
      this.showTitle = !this.showTitle
    }
  }
}
</script>

Im obigen Code haben wir eine Schaltfläche erstellt, die die Anzeige des Titels umschaltet. Wir binden an die Variable showTitle und der Titel wird nur angezeigt, wenn sein Wert wahr ist. Durch Klicken auf die Schaltfläche wird der Wert „showTitle“ in der Methode „toggleTitle“ auf „false“ gesetzt und das DOM neu gerendert. In diesem Fall verschwindet der Titel aus dem Browser.

v-if-Direktive in Vue

Die v-if-Direktive wird zum Rendern von DOM-Elementen nur verwendet, wenn die angegebene Bedingung wahr ist. Im Gegensatz zu v-show fügt v-if DOM-Elemente dynamisch hinzu bzw. entfernt sie.

Die v-if-Anweisung kann auf folgende Arten verwendet werden:

<template>
  <div>
    <h2 id="Welcome-username">Welcome, {{ username }}!</h2>

    <button @click="login">Log In</button>

    <button @click="logout">Log Out</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },

  methods: {
    login() {
      this.isLoggedIn = true
      this.username = 'Your Username'
    },

    logout() {
      this.isLoggedIn = false
      this.username = ''
    }
  }
}
</script>

Im obigen Code verwenden wir die v-if-Anweisung, um zu überprüfen, ob Sie angemeldet sind oder nicht. Wenn Sie bereits angemeldet sind, rendern wir die Willkommensnachricht im DOM, andernfalls verstecken wir sie. Die Anmelde- und Abmeldemethoden werden aufgerufen, wenn wir auf die Schaltfläche „Anmelden“ oder „Abmelden“ klicken, und diese Methoden aktualisieren die Daten und das DOM.

Die Kombination von V-Show und V-If in Vue

In vielen Fällen müssen wir einen bestimmten Bereich dynamisch rendern und je nach Situation unterschiedliche Inhalte ein-/ausblenden. v-show und v-if können kombiniert werden, um diese Art der dynamischen Darstellung zu erreichen.

<template>
  <div>
    <div v-if="isActivated">
      <h3 id="Welcome-name">Welcome, {{ name }}!</h3>
    </div>
    <div v-else>
      <h3 id="Please-log-in-to-access-this-page">Please log in to access this page.</h3>
    </div>

    <button @click="toggleActivation">Activate/Deactivate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
      name: 'Your Username'
    }
  },

  methods: {
    toggleActivation() {
      this.isActivated = !this.isActivated
    }
  }
}
</script>

Im obigen Beispiel verwenden wir die v-if-Direktive, um zu prüfen, ob sie aktiviert ist, und um verschiedene Ansichten zu rendern. Wenn isActivated wahr ist, rendern wir die Willkommensnachricht im DOM; andernfalls zeigen wir die Nachricht an, um den Benutzer zu authentifizieren. Wir verwenden die v-show-Direktive, um eine dynamische Anzeige einiger Inhalte zu erreichen.

Bei einer Komponente mit einer Schaltfläche können wir toggleActivation verwenden, um den isActivated-Wert umzuschalten und dadurch das Rendering der DOM-Ansicht zu ändern. Durch die Kombination von v-show und v-if können wir die Seite besser steuern und sie dynamischer und flexibler gestalten.

Zusammenfassung

v-show und v-if sind zwei nützliche Anweisungen in Vue, die zum Steuern der Anzeige und Ausblendung von DOM-Elementen verwendet werden. v-show wird verwendet, um einfach das Ein-/Ausblenden von CSS zu steuern, während v-if DOM-Elemente dynamisch hinzufügt/entfernt. Wenn Sie diese beiden Anweisungen zusammen verwenden, können Sie die dynamische Darstellung des DOM besser steuern. Bei der Implementierung des dynamischen Seitenrenderings von Vue sollten wir uns je nach Situation für die Verwendung von v-show oder v-if und deren Kombination entscheiden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie v-show und v-if in Vue, um eine dynamische Seitenwiedergabe zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!