So richten Sie ein verstecktes Formular in Vue ein

Vorwort

In der Frontend-Entwicklung sind Formulare ein unverzichtbarer Bestandteil. Sie helfen uns, Benutzerinformationen zu sammeln und interaktive Effekte zu erzielen. Es gibt jedoch einige Situationen, z. B. die Notwendigkeit, Dateien asynchron hochzuladen. Zu diesem Zeitpunkt müssen wir die Datei hochladen, ohne die Seite zu aktualisieren. Zu diesem Zeitpunkt kann das Formular ausgeblendet werden, um eine teilweise Aktualisierung zu erreichen.

Wie implementiert man also die Funktion zum Ausblenden des Formulars in Vue? In diesem Artikel werden drei Methoden vorgestellt: V-Show, V-IF und Computed. Die Implementierungsprinzipien der drei unterscheiden sich geringfügig. Einzelheiten finden Sie weiter unten.

1. Verwenden Sie den Befehl v-show

Der Befehl v-show steuert nur die Anzeige und das Ausblenden beim Rendern des DOM. Die Anzeigeelemente sind jedoch weiterhin in der DOM-Struktur vorhanden, der Stil ist jedoch unterschiedlich.

Beispielcode:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <form v-show="isShowForm" @submit.prevent="handleSubmit">
      <input type="text" placeholder="请输入您的姓名" v-model="name" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Die Implementierung des obigen Codes ist sehr einfach, indem eine Schaltfläche zum Steuern der Anzeige und Ausblendung des Formulars verwendet wird. Die v-show-Anweisung bindet die Daten direkt an isShowForm und bestimmt, ob das Formular basierend auf dem wahren oder falschen Wert seines Werts angezeigt wird.

2. Verwenden Sie die v-if-Anweisung

Die v-if-Anweisung ist immer noch relativ verbreitet, um das Anzeigen und Ausblenden von Elementen zu steuern. Der Unterschied besteht darin, dass sie Elemente zum DOM hinzufügt/entfernt.

Beispielcode:

<template>
  <div>
    <button @click="isShowForm = !isShowForm">显示/隐藏表单</button>
    <template v-if="isShowForm">
      <form @submit.prevent="handleSubmit">
        <input type="text" v-model="name" placeholder="请输入您的姓名" />
        <button type="submit">提交</button>
      </form>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Anders als v-show fügt v-if DOM-Elemente zum DOM-Generierungsbaum hinzu bzw. entfernt sie. Daher kann die Verwendung von v-if den Ressourcenverbrauch reduzieren, wenn das Element nicht auf der Seite gerendert wird.

3. Berechnete Eigenschaften verwenden

Obwohl berechnete Eigenschaften ähnlich wie Methoden implementiert werden, unterscheidet sich ihr Caching-Mechanismus von dem von Methoden. Das heißt, eine berechnete Eigenschaft wird nur dann neu ausgewertet, wenn sich ihre Abhängigkeiten ändern. Wenn mehrere Komponenten dieselbe berechnete Eigenschaft aufrufen, wird sie aufgrund ihres Caches nur einmal ausgewertet. Daher kann durch die Verwendung berechneter Eigenschaften eine effektive Leistungsoptimierung in Vue.js erreicht werden.

Beispielcode:

<template>
  <div>
    <button @click="toggleForm">显示/隐藏表单</button>
    <form @submit.prevent="handleSubmit" v-if="shouldShowForm">
      <input type="text" v-model="name" placeholder="请输入您的姓名" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowForm: false,
      name: '',
    };
  },
  computed: {
    shouldShowForm: function() {
      return this.isShowForm;
    },
  },
  methods: {
    toggleForm() {
      this.isShowForm = !this.isShowForm;
    },
    handleSubmit() {
      console.log(this.name);
      this.isShowForm = false;
    },
  },
};
</script>

Im obigen Beispiel kapseln wir eine Methodenfunktion in eine berechnete Eigenschaft. Aufgrund der Caching-Funktion berechneter Eigenschaften wird der ShouldShowModal-Wert nur dann aktiv neu berechnet, wenn sich der isShowForm-Wert synchron ändert.

Zusammenfassung

Diese drei Methoden können alle den Effekt erzielen, dass das Formular ausgeblendet wird. v-show wird durch die Steuerung der Anzeige und des Ausblendens von CSS-Stilen implementiert; v-if fügt dem DOM-Baum Elemente hinzu bzw. entfernt diese; verarbeitet den isShowForm-Wert im berechneten Attribut. Für unterschiedliche Szenarien können unterschiedliche Ansätze gewählt werden.

Wenn wir nur ein bestimmtes Formularsteuerelement ausblenden müssen, können wir dies natürlich auch mit V-Modell- und CSS-Stilen erreichen. Daher ist es für Probleme wie das Ausblenden von Formularen die beste Lösung, die einfachste und effizienteste Methode basierend auf den tatsächlichen Anforderungen zu wählen.

Das obige ist der detaillierte Inhalt vonSo richten Sie ein verstecktes Formular in Vue ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!