Comment implémenter une zone de saisie étiquetée à l'aide de Vue ?

Avec le développement des applications web, les zones de saisie étiquetées deviennent de plus en plus populaires. Ce type de zone de saisie permet aux utilisateurs de saisir des données plus facilement et facilite également la gestion et la recherche des données saisies. Vue est un framework JavaScript très puissant qui peut nous aider à implémenter rapidement des zones de saisie étiquetées. Cet article explique comment utiliser Vue pour implémenter une zone de saisie étiquetée.

Première étape : Créer une instance Vue

Tout d'abord, nous devons créer une instance Vue sur la page, le code est le suivant :

<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>

#🎜🎜 #Dans le code, nous avons créé un composant Vue qui contient une zone de saisie et une liste de balises. La zone de saisie est utilisée pour ajouter de nouvelles balises et la liste de balises est utilisée pour afficher les balises existantes et fournit la fonction de suppression de balises.

Dans la méthode data du composant, nous définissons deux éléments de données : tags est utilisé pour stocker les données de toutes les balises, avec une initiale valeur de un Un tableau contenant trois balises ; newTag est utilisé pour stocker les données de la nouvelle balise saisie par l'utilisateur. La valeur initiale est une chaîne vide.

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-onDans methods, nous définissons deux méthodes : addTag est utilisé pour ajouter une nouvelle balise, qui sera ajoutée après que l'utilisateur appuie sur la touche Entrée . Ajoutez la nouvelle balise au tableau tags et définissez newTag sur une chaîne vide ; removeTag est utilisé pour supprimer la balise, elle sera basée. sur l'index de balise entrant de la balise supprime la balise correspondante du tableau tags.

#🎜🎜#Étape 2 : Afficher la liste des tags #🎜🎜##🎜🎜#Ensuite, nous devons afficher la liste des tags. Pour réaliser cette fonctionnalité, nous utilisons la directive v-for dans Vue. La directive v-for peut parcourir les données d'un tableau et les afficher sur la page. #🎜🎜##🎜🎜#Dans le code, nous utilisons v-for="(tag, index) in tags" pour parcourir toutes les balises dans les tags array , tag représente chaque balise du tableau et index représente l'index de la balise dans le tableau. Nous utilisons l'attribut :key="index" pour identifier de manière unique l'index de la balise, ce qui aide Vue à optimiser les performances du composant. #🎜🎜##🎜🎜#Étape 3 : Ajouter une nouvelle balise #🎜🎜##🎜🎜#Lorsque l'utilisateur saisit une nouvelle balise dans la zone de saisie et appuie sur la touche Entrée, nous devons ajouter la nouvelle balise à tableau de balises. Pour réaliser cette fonctionnalité, nous utilisons la directive v-model dans Vue. La directive v-model peut lier dans les deux sens les données du composant aux éléments de formulaire de la page. #🎜🎜##🎜🎜#Dans le code, nous utilisons v-model="newTag" pour connecter de manière bidirectionnelle la valeur dans la zone de saisie avec les données newTag dans le composant. De cette façon, lorsque l'utilisateur saisit une nouvelle balise dans la zone de saisie, la valeur de newTag changera également en conséquence. #🎜🎜##🎜🎜#Nous avons également utilisé la directive v-on dans Vue pour écouter les événements clés de l'utilisateur. Lorsque l'utilisateur appuie sur la touche Entrée, v-on:keyup.enter déclenchera la méthode addTag pour ajouter la nouvelle balise au tableau tags . #🎜🎜##🎜🎜#Étape 4 : Supprimer les balises#🎜🎜##🎜🎜#Enfin, nous devons autoriser les utilisateurs à supprimer des balises. Pour réaliser cette fonctionnalité, nous utilisons un bouton, et lorsque l'utilisateur clique sur le bouton, nous supprimons la balise correspondante du tableau tags. #🎜🎜##🎜🎜#Dans le code, nous utilisons la directive v-on dans Vue pour écouter les événements de clic de l'utilisateur. Lorsque l'utilisateur clique sur le bouton Supprimer, v-on:click déclenchera la méthode removeTag, en prenant l'index de la balise entrante comme paramètre, à partir des tags code> array Supprimez la balise correspondante. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Grâce à la démonstration ci-dessus, nous avons appris à utiliser Vue pour implémenter une zone de saisie étiquetée. Nous avons utilisé les directives <code>v-for, v-model et v-on dans Vue pour afficher la liste des balises et la zone de saisie de liaison bidirectionnelle. valeur et écoute les événements du clavier et de la souris pour les zones de saisie et les boutons. Dans les projets réels, nous pouvons personnaliser le style d'étiquette et la méthode de fonctionnement en fonction des besoins pour obtenir une zone de saisie étiquetée plus flexible. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!