Das Vue-Frontend implementiert das Hinzufügen, Löschen, Ändern und Abfragen

Vue.js ist ein beliebtes Front-End-Framework zum Erstellen leistungsstarker Single-Page-Anwendungen. In diesem Artikel wird erläutert, wie Sie Vue.js zum Implementieren der Funktionen zum Hinzufügen, Löschen, Ändern und Überprüfen verwenden.

1. Erstellen Sie ein Grundgerüst mit Vue.js

Zuerst müssen wir Vue.js installieren. Sie können die komprimierte Datei von Vue.js von der offiziellen Website herunterladen oder über CDN auf die Vue.js-Bibliothek verweisen.

Erstellen Sie eine HTML-Datei und importieren Sie die Vue.js-Bibliothek. Als Nächstes initialisieren wir eine Vue-Instanz und definieren eine Liste in der Vorlage:

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3']
    }
  })
</script>

Die v-for-Direktive in der Vorlage wird verwendet, um jedes Element in der Elementliste zu durchlaufen. Da wir bei der Instanziierung den Anfangswert der Elemente angegeben haben, werden in der obigen Liste diese drei Elemente angezeigt. Dies ist ein Beispiel für eine einfache Vue.js-Anwendung.

Zweitens realisieren Sie die Funktion des Hinzufügens von Elementen

Geben Sie den folgenden Code ein:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="item in items">
      {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    }
  })
</script>

In der Vorlage haben wir ein Texteingabefeld und eine Schaltfläche „Element hinzufügen“ hinzugefügt und die V-Modell-Anweisung an die Daten in gebunden die newItem-Eigenschaft. In der Vue-Instanz haben wir eine Methode namens addItem definiert, die aufgerufen wird, wenn der Benutzer auf die Schaltfläche „Element hinzufügen“ klickt, um das Element zur Liste hinzuzufügen.

Der Wert des Eingabefelds wird im newItem-Attribut gespeichert. Wenn die addItem-Methode aufgerufen wird, fügen wir ihn in die Artikelliste ein und setzen dann den Wert des newItem-Attributs zurück. Schließlich rendert Vue.js die Liste automatisch neu und zeigt sie im Browser an.

3. Implementieren Sie die Funktion zum Löschen von Elementen

Als nächstes implementieren wir die Funktion zum Löschen von Elementen. Wir müssen eine Schaltfläche hinzufügen, um jedes Listenelement mit einem Klick zu löschen.
Geben Sie den folgenden Code ein:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      {{ item }}
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: ['item 1', 'item 2', 'item 3'],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      }
    }
  })
</script>

Wir haben eine Methode namens „removeItem“ hinzugefügt und sie an die Schaltfläche „Entfernen“ in der Liste gebunden. Wenn der Benutzer auf die Schaltfläche „Entfernen“ klickt, wird die Methode „removeItem“ aufgerufen und löscht das entsprechende Element in der Liste. Hier können wir es mit dem zweiten Parameter (Index) aufrufen, um ein bestimmtes Element zu löschen.

4. Implementieren Sie die Funktion zum Ändern von Elementen.

Als nächstes implementieren wir die Funktion zum Bearbeiten von Elementen. Wir können in jedem Listenelement ein Eingabefeld platzieren. Wenn der Benutzer auf das Eingabefeld klickt, wird es in den Bearbeitungsstatus versetzt, sodass der Benutzer den Textinhalt des Elements ändern kann. Geben Sie den folgenden Code ein:

<div id="app">
  <input v-model="newItem">
  <button @click="addItem">Add Item</button>

  <ul>
    <li v-for="(item, index) in items">
      <input v-model="item.text" v-show="!item.editing">
      <span v-show="item.editing">{{ item.text }}</span>
      <button @click="editItem(index)">{{ item.editing ? 'Save' : 'Edit' }}</button>
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { text: 'item 1', editing: false },
        { text: 'item 2', editing: false },
        { text: 'item 3', editing: false }
      ],
      newItem: ''
    },
    methods: {
      addItem: function() {
        this.items.push({ text: this.newItem, editing: false });
        this.newItem = '';
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      },
      editItem: function(index) {
        var item = this.items[index];
        if (item.editing) {
          item.editing = false;
        } else {
          item.editing = true;
        }
      }
    }
  })
</script>

Wir haben jedem Listenelement ein Eingabefeld und zwei Schaltflächen hinzugefügt: eine Schaltfläche zum Bearbeiten und eine Schaltfläche zum Löschen. In der Vue-Instanz haben wir eine Methode namens „editItem“ hinzugefügt, die aufgerufen wird, wenn der Benutzer auf die Schaltfläche „Bearbeiten“ klickt.

Mit dieser Methode können wir den Bearbeitungsstatus (Bearbeitung) auf wahr oder falsch setzen. Wenn das Element bearbeitet wird, zeigen wir den Textinhalt des Elements an, andernfalls zeigen wir ein Eingabefeld an, damit der Benutzer Änderungen vornehmen kann.

Abschließend müssen wir nach dem Speichern der Änderungen nur noch die Bearbeitungseigenschaft auf „false“ zurücksetzen.

5. Zusammenfassung

In diesem Artikel haben wir gelernt, wie man mit dem Vue.js-Framework eine einfache Funktion zum Hinzufügen, Löschen, Ändern und Überprüfen implementiert. Die Verwendung von Vue.js kann Entwicklern dabei helfen, schnell komplexe Single-Page-Anwendungen zu erstellen und die Entwicklung effizienter zu gestalten.

Vue.js verfügt über viele weitere Funktionen und Features, die Entwickler eingehend erkunden und auf ihre eigenen Projekte anwenden können.

Das obige ist der detaillierte Inhalt vonDas Vue-Frontend implementiert das Hinzufügen, Löschen, Ändern und Abfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!