vue2-Formular hinzufügen, löschen, Geschäftslogik überprüfen

Mit der kontinuierlichen Weiterentwicklung moderner Webanwendungen sind Formulare immer noch eine wichtige Interaktionsmethode zwischen Benutzern und Anwendungen. Als beliebtes Front-End-Framework bietet Vue2 praktische Formularverarbeitungsmethoden, mit denen das Hinzufügen, Löschen und Abfragen von Formularen schnell implementiert werden kann. Bevor wir die Abfrage zum Hinzufügen und Löschen von Vue2-Formularen implementieren, müssen wir zunächst verstehen, was Vue2 ist und welche Grundkonzepte es hat.

Vue2 ist ein leichtes JavaScript-Framework, das die progressive Entwicklung unterstützt und eine Möglichkeit bietet, schnell Benutzeroberflächen zu erstellen. Die Kernidee von Vue2 besteht darin, das DOM vom JavaScript-Code zu trennen, das Objektmodell an die Ansicht zu binden und Anwendungen durch Komponentisierung zu erstellen. Ein Hauptmerkmal von Vue2 ist die datengesteuerte Ansicht. Wenn sich die Zustandsvariable der Komponente ändert, aktualisiert Vue2 automatisch die entsprechende Ansicht auf der Seite. Vue2 unterstützt auch Funktionen wie Anweisungen und Lebenszyklus-Hooks, mit denen sich komplexe Geschäftslogik problemlos implementieren lässt.

Als nächstes zeigen wir, wie man mit Vue2 die Geschäftslogik zum Hinzufügen, Löschen und Abfragen von Formularen implementiert. In diesem Beispiel verwenden wir Vue2, um eine einfache Aufgabenlistenanwendung zu erstellen. Wir werden den Komponentenmechanismus von Vue2 verwenden, um ein Listenformular zu erstellen und Hinzufügungs-, Lösch- und Prüfvorgänge durch Datenübertragung zwischen Komponenten zu implementieren. Hier ist die Liste der Komponenten, die wir erstellen werden:

1. TodoList – Listenkomponente
2. TodoItem – Listenelementkomponente

Die TodoList-Komponente wird verwendet, um eine Liste aller Aufgabenelemente anzuzeigen, während die TodoItem-Komponente verwendet wird Wird verwendet, um den Inhalt eines einzelnen Aufgabenelements anzuzeigen. Wir werden mehrere TodoItem-Komponenten in der TodoList-Komponente erstellen, um eine vollständige To-Do-Liste zu erstellen.

Zuerst müssen wir eine TodoItem-Komponente erstellen, um den Inhalt eines einzelnen Aufgabenelements darzustellen. Wir werden Requisiten verwenden, um Daten an die Komponente zu übergeben, und diese Requisiten werden intern von der Komponente zum Rendern der Ansicht verwendet. Wir definieren den folgenden Code in der TodoItem-Komponente:

<template>
  <div>
    <input type="checkbox" v-model="completed">{{ item.text }}
    <button @click="deleteItem">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      completed: false
    }
  },
  methods: {
    deleteItem() {
      this.$emit('delete-item', this.item)
    }
  }
}
</script>

Im obigen Code definieren wir zunächst die Vorlagendatei der Komponente und verwenden die V-Model-Direktive, um den Status der Komponente bidirektional an den Wert des Eingabefelds zu binden um zu erreichen, dass der Benutzer Aufgaben überprüft. Wir haben auch eine Schaltfläche „Löschen“ hinzugefügt. Wenn der Benutzer auf die Schaltfläche klickt, geben wir mithilfe der Methode „$emit“ ein „delete-item“-Ereignis aus, das das Datenobjekt des Aufgabenelements als Parameter übergibt.

Als nächstes müssen wir die TodoItem-Komponente in der TodoList-Komponente verwenden, um mehrere Aufgabenelemente zu erstellen. Wir verwenden die v-for-Direktive, um alle To-Do-Elemente zu durchlaufen und für jedes To-Do-Element eine TodoItem-Komponente zu rendern. Wir definieren den folgenden Code in der TodoList-Komponente:

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <todo-item :item="item" @delete-item="deleteItem"></todo-item>
    </div>
    
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemText" required />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      items: [
        { id: 1, text: '完成Vue2表单增删查', completed: false },
        { id: 2, text: '学习JavaScript高级编程', completed: true },
        { id: 3, text: '尝试构建一个全栈应用', completed: false }
      ],
      newItemText: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItemText) {
        let newId = this.items.length + 1
        this.items.push({
          id: newId,
          text: this.newItemText,
          completed: false
        })
        this.newItemText = ''
      }
    },
    deleteItem(item) {
      let index = this.items.findIndex(x => x.id === item.id)
      if (index >= 0) {
        this.items.splice(index, 1)
      }
    }
  }
}
</script>

Im obigen Code definieren wir zunächst ein Datenlistenelement, das drei Aufgabenelemente enthält. Wir definieren außerdem eine newItemText-Variable, die zum Speichern des vom Benutzer eingegebenen neuen Aufgabeninhalts verwendet wird. In der Vorlage verwenden wir die v-for-Direktive, um alle Aufgabenelemente zu durchlaufen und jedes Aufgabenelement mithilfe der TodoItem-Komponente zu rendern. Außerdem haben wir das Submit-Ereignis an das Formular zum Hinzufügen neuer Elemente gebunden und der Methode ein neues Aufgabenelement hinzugefügt.

Beim Löschen eines Aufgabenelements verwenden wir die Methode findIndex, um den Index des zu löschenden Elements im Formular zu finden, und verwenden die Methode splice, um das Element aus der Liste zu löschen. Wenn der Benutzer ein Aufgabenelement überprüft, wird die Statusvariable der Komponente aktualisiert und mithilfe der V-Model-Direktive an den Wert des Eingabefelds gebunden.

Anhand eines so einfachen Beispiels können wir sehen, dass die Verwendung von Vue2 zum Implementieren des Hinzufügens, Löschens und Abfragens von Formularen sehr praktisch und schnell ist. In praktischen Anwendungen können wir den Komponentenmechanismus und die Datenbindungsfunktionen von Vue2 nutzen, um die Entwicklung zu beschleunigen, die Fehlerwahrscheinlichkeit zu verringern und so komplexere Geschäftsanforderungen zu erfüllen.

Das obige ist der detaillierte Inhalt vonvue2-Formular hinzufügen, löschen, Geschäftslogik überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!