Vue-Listenseite hinzufügen, löschen, ändern und überprüfen

Da Vue.js immer beliebter wird, wird die Nachfrage nach Vue-Anwendungen zwangsläufig steigen. Da die Bedeutung von Listenseiten in den meisten Webanwendungen immer weiter zunimmt, ist das Hinzufügen, Löschen und Ändern von Vue-Listenseiten nicht nur zu einer sehr wichtigen Anwendungsanforderung geworden, sondern auch zu einem der wichtigsten Dinge, die Vue-Lernende lernen sollten. In diesem Artikel wird erläutert, wie Sie mit Vue.js grundlegende Vorgänge zum Hinzufügen, Löschen, Ändern und Überprüfen auf Listenseiten ausführen.

Vorbereitung:

Bevor Sie mit diesem Artikel beginnen, stellen Sie bitte sicher, dass Sie über ausreichende Kenntnisse der Grundlagen von HTML und JavaScript verfügen, da wir zum Erstellen der Listenanwendung Vue.js, HTML und JavaScript verwenden werden.

Dieser Artikel behandelt die folgenden Themen:

1. Erstellen Sie eine Liste

3. Bearbeiten Sie einen Eintrag

1. Erstellen Sie eine Vue-Anwendung

Wir müssen Vue.js installieren. Es kann über CDN oder über den npm-Paketmanager installiert werden. Wenn Sie über ein CDN installieren möchten, können Sie es erhalten von: https://unpkg.com/vue@next/dist/vue.global.js. Wenn Sie mit dem npm-Paketmanager installieren möchten, können Sie im Terminal den folgenden Befehl verwenden:

npm install vue

Sobald die Installation abgeschlossen ist, können wir nun wie folgt eine Vue-Instanz erstellen:

const app = Vue.createApp({ });

Als nächstes definieren wir die Vorlage in der Instanz Daten, Methoden und berechnete Eigenschaften.

2. Erstellen Sie eine Liste

Wir verwenden die v-for-Anweisung, um die Listendaten zu durchlaufen. Angenommen, wir haben ein Array, das Listenelementdaten speichert. Wir können dieses Array wie folgt als Datenmodell in der Vue-Instanz deklarieren:

const app = Vue.createApp({ data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' } ] } } });

Jetzt müssen wir die v-for-Direktive in der Vorlage verwenden, um dieses Array zu durchlaufen und die Daten für jedes Element anzuzeigen. Dazu fügen wir der Vue-Vorlage den folgenden Code hinzu:

Der obige Code verwendet die v-for-Direktive, um das Datenarray zu durchlaufen und mithilfe des Schlüsselworts:key eine eindeutige Kennung für jedes Elementelement bereitzustellen.

Jetzt haben wir die Liste fertig erstellt.

3. Neue Elemente hinzufügen

Wir verwenden die von Vue bereitgestelltev-model-Direktive, um ein neues Listeneingabe- und Übermittlungsformular zu erstellen. Diev-model-Direktive ermöglicht die Bindung von Eingabewerten an Vue-Komponenten. Mit derv-model-Direktive verwenden wir im Allgemeinen Texteingabefelder und aktualisieren automatisch die bidirektionale Datenbindung.

Um ein neues Listenelement hinzuzufügen, müssen wir ein Formular anzeigen und neue Daten aus dem Formular sammeln. Wir erstellen das Formular mit Vue.js wie unten gezeigt:

Wir verwenden den Ereignismodifikator@submit.preventfür das Formular, sodass das Formular nie tatsächlich gesendet wird. Stattdessen löst es den Event-Handler aus, den wir an die MethodeaddItemgebunden haben. Diese Methode fügt dem Datenarray ein neues Element hinzu.

Wie ist diev-model-Direktive an das reservierte Eingabetextfeld gebunden? Wir müssen eine neue VariablenewItemim Datenmodell der Vue-Komponente definieren, wie unten gezeigt:v-model指令来建立新的列表输入和提交表单。v-model指令允许绑定输入值到Vue组件中。使用v-model指令实际上是我们一般使用文本输入框的理解方式，它会自动更新双向数据绑定。

为了添加新的列表项，我们需要显示一个表单，并从该表单收集新数据。我们用Vue.js创建表单，如下所示：

const app = Vue.createApp({ data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' } ], newItem: '' } }, methods: { addItem() { this.items.push({id: this.items.length + 1, name: this.newItem}); this.newItem = ''; } } });

我们在表单上使用了@submit.prevent事件修饰符，这样表单永远不会真正提交。而是触发我们绑定到addItem方法上的事件处理程序。此方法将添加新项目到数据数组中。

这里v-model指令是如何绑定到输入预留文本框中的呢？我们需要在Vue组件的数据模型中定义一个新的变量newItem，如下所示：

const app = Vue.createApp({ data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' } ], newItem: '', editing: false, currentItem: null } }, methods: { addItem() { this.items.push({id: this.items.length + 1, name: this.newItem}); this.newItem = ''; }, editItem(item) { this.editing = true; this.currentItem = item; }, saveItem() { this.editing = false; this.currentItem = null; } } });

在addItem方法中，我们在数组的末尾插入一个新的项目对象，并为新的项目对象提供一个唯一的ID。添加项目后，我们将使用空字符串重置newItem。现在我们已经实现了向数组添加新条目的功能。

4、编辑条目

我们现在的目标是为每个项目添加一个编辑按钮，当点击该按钮时，可以修改项目的名称。实现这种编辑功能的方法是将v-model绑定到数据模型中的当前项并显示保存按钮。可以在每个项目旁边放一个编辑按钮，单击该按钮时切换到编辑模式。

首先，我们需要定义一个currentItem变量。该变量将指定当前正在编辑的项目。我们还需要定义editing变量，以便在编辑模式下隐藏显示条目名称，如下所示：

现在我们需要在每个项目元素中显示编辑按钮。当编辑按钮被单击时，我们需要切换到编辑模式，这样就可以开始编辑当前项目了。我们可以使用以下代码为每个项目设置编辑按钮：

const app = Vue.createApp({ data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' } ], newItem: '', editing: false, currentItem: null } }, methods: { addItem() { this.items.push({id: this.items.length + 1, name: this.newItem}); this.newItem = ''; }, editItem(item) { this.editing = true; this.currentItem = item; }, saveItem() { this.editing = false; this.currentItem = null; }, deleteItem(item) { const index = this.items.indexOf(item); if (index > -1) { this.items.splice(index, 1); } } } });

我们通过使用v-if

rrreee

rrreee

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