Wie implementiert man ein beschriftetes Eingabefeld mit Vue?

Mit der Entwicklung von Webanwendungen werden beschriftete Eingabefelder immer beliebter. Diese Art von Eingabefeld ermöglicht Benutzern eine bequemere Eingabe von Daten und erleichtert Benutzern außerdem die Verwaltung und Suche der eingegebenen Daten. Vue ist ein sehr leistungsfähiges JavaScript-Framework, das uns dabei helfen kann, beschriftete Eingabefelder schnell zu implementieren. In diesem Artikel wird erläutert, wie Sie mit Vue ein beschriftetes Eingabefeld implementieren.

Schritt 1: Erstellen Sie eine Vue-Instanz

Zuerst müssen wir eine Vue-Instanz auf der Seite erstellen. Der Code lautet wie folgt:

<template>
  <div>
    <div>
      <label>标签：</label>
      <input type="text" v-model="newTag" v-on:keyup.enter="addTag">
    </div>
    <div>
      <label>标签列表：</label>
      <div v-for="(tag, index) in tags" :key="index">
        {{ tag }}
        <button v-on:click="removeTag(index)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ["标签1", "标签2", "标签3"],
      newTag: ""
    };
  },
  methods: {
    addTag() {
      if (this.newTag.trim() !== "") {
        this.tags.push(this.newTag.trim());
        this.newTag = "";
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
};
</script>

Im Code haben wir eine Vue-Komponente erstellt, die ein Eingabefeld und eine Beschriftung enthält Liste. Das Eingabefeld dient zum Hinzufügen neuer Tags, die Tag-Liste dient zur Anzeige vorhandener Tags und bietet die Funktion zum Löschen von Tags.

In der data-Methode der Komponente definieren wir zwei Datenelemente: tags wird zum Speichern der Daten aller Tags verwendet. Der Anfangswert ist ein Array mit drei Tags ;newTag wird verwendet, um die vom Benutzer eingegebenen Daten des neuen Tags zu speichern. data 方法中，我们定义了两个数据项：tags 用于存储所有标签的数据，初始值为一个包含三个标签的数组；newTag 用于存储用户输入的新标签的数据，初始值为空字符串。

在 methods 中，我们定义了两个方法：addTag 用于添加新标签，它会在用户按下回车键后将新标签添加到 tags 数组中，并将 newTag 设置为空字符串；removeTag 用于删除标签，它会根据传入的标签索引从 tags 数组中删除对应的标签。

第二步：展示标签列表

接下来，我们需要将标签列表展示出来。为了实现这一功能，我们使用了 Vue 中的 v-for 指令。v-for 指令可以将一个数组中的数据循环展示到页面上。

在代码中，我们使用 v-for="(tag, index) in tags" 循环遍历了 tags 数组中的所有标签，tag 表示数组中的每个标签，index 表示标签在数组中的索引。我们使用 :key="index" 属性将标签的索引作为唯一标识，这有助于 Vue 优化组件的性能。

第三步：添加新标签

当用户在输入框中输入新标签并按下回车键时，我们需要将新标签添加到 tags 数组中。为了实现这一功能，我们使用了 Vue 中的 v-model 指令。v-model 指令可以将组件中的数据和页面上的表单元素进行双向绑定。

在代码中，我们使用 v-model="newTag" 将输入框中的值与组件中的 newTag 数据进行了双向绑定。这样，当用户在输入框中输入新标签时，newTag 的值也会跟着改变。

我们还使用了 Vue 中的 v-on 指令来监听用户的按键事件。当用户按下回车键时，v-on:keyup.enter 会触发 addTag 方法，将新标签添加到 tags 数组中。

第四步：删除标签

最后，我们需要让用户可以删除标签。为了实现这一功能，我们使用了一个按钮，当用户点击按钮时，我们会从 tags 数组中删除对应的标签。

在代码中，我们使用了 Vue 中的 v-on 指令来监听用户的点击事件。当用户点击删除按钮时，v-on:click 会触发 removeTag 方法，将传入的标签索引作为参数，从 tags 数组中删除对应的标签。

总结

通过上面的展示，我们学习了如何使用 Vue 实现带标签的输入框。我们使用了 Vue 中的 v-for、v-model 和 v-on

In methods definieren wir zwei Methoden: addTag wird zum Hinzufügen eines neuen Tags verwendet. Es fügt das neue Tag zu tags-Array und setzen Sie newTag auf eine leere Zeichenfolge; removeTag wird zum Löschen von Tags verwendet, die aus tags entfernt werden Löschen Sie das entsprechende Tag aus dem Array. 🎜🎜Schritt 2: Tag-Liste anzeigen🎜🎜Als nächstes müssen wir die Tag-Liste anzeigen. Um diese Funktionalität zu erreichen, verwenden wir die v-for-Direktive in Vue. Die v-for-Direktive kann die Daten in einem Array durchlaufen und auf der Seite anzeigen. 🎜🎜Im Code verwenden wir v-for="(tag, index) in tags", um alle Tags im tags-Array, tag, zu durchlaufen stellt jede Beschriftung im Array dar und index stellt den Index der Beschriftung im Array dar. Wir verwenden das Attribut :key="index", um den Index des Tags eindeutig zu identifizieren, was Vue dabei hilft, die Leistung der Komponente zu optimieren. 🎜🎜Schritt 3: Neues Tag hinzufügen🎜🎜Wenn der Benutzer ein neues Tag in das Eingabefeld eingibt und die Eingabetaste drückt, müssen wir das neue Tag zum Array tags hinzufügen. Um diese Funktionalität zu erreichen, verwenden wir die v-model-Direktive in Vue. Die v-model-Direktive kann die Daten in der Komponente bidirektional an die Formularelemente auf der Seite binden. 🎜🎜Im Code verwenden wir v-model="newTag", um den Wert im Eingabefeld in beide Richtungen an die newTag-Daten in der Komponente zu binden. Wenn der Benutzer auf diese Weise ein neues Tag in das Eingabefeld eingibt, ändert sich auch der Wert von newTag entsprechend. 🎜🎜Wir haben auch die v-on-Direktive in Vue verwendet, um auf Benutzerschlüsselereignisse zu warten. Wenn der Benutzer die Eingabetaste drückt, löst v-on:keyup.enter die Methode addTag aus, um das neue Tag zum Array tags hinzuzufügen . 🎜🎜Schritt 4: Tags löschen🎜🎜Zuletzt müssen wir Benutzern erlauben, Tags zu löschen. Um diese Funktionalität zu erreichen, verwenden wir eine Schaltfläche. Wenn der Benutzer auf die Schaltfläche klickt, entfernen wir das entsprechende Tag aus dem Array tags. 🎜🎜Im Code verwenden wir die v-on-Direktive in Vue, um auf Benutzerklickereignisse zu warten. Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, löst v-on:click die Methode removeTag aus, wobei der eingehende Tag-Index als Parameter aus den tags verwendet wird. code> array Löschen Sie das entsprechende Tag. 🎜🎜Zusammenfassung🎜🎜Durch die obige Demonstration haben wir gelernt, wie man mit Vue ein beschriftetes Eingabefeld implementiert. Wir haben die Direktiven <code>v-for, v-model und v-on in Vue verwendet, um die Tag-Liste und das Eingabefeld für die bidirektionale Bindung anzuzeigen Wert und lauscht auf Tastatur- und Mausereignisse für Eingabefelder und Schaltflächen. In tatsächlichen Projekten können wir den Beschriftungsstil und die Betriebsmethode entsprechend den Anforderungen anpassen, um ein flexibleres beschriftetes Eingabefeld zu erhalten. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man ein beschriftetes Eingabefeld mit Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!