Ajouter, supprimer, modifier et vérifier la page de liste de vues

À mesure que Vue.js devient de plus en plus populaire, la demande d'applications Vue va inévitablement augmenter. Alors que l'importance des pages de liste continue d'augmenter dans la plupart des applications Web, l'ajout, la suppression et la modification de pages de liste Vue sont non seulement devenues une exigence d'application très importante, mais également l'une des choses les plus importantes que les apprenants de Vue devraient apprendre. Cet article explique comment utiliser Vue.js pour effectuer des opérations de base d'ajout, de suppression, de modification et de vérification sur les pages de liste.

Préparation :

Avant de commencer cet article, assurez-vous d'avoir suffisamment de connaissances sur les bases du HTML et du JavaScript, car nous utiliserons Vue.js, HTML et JavaScript pour créer l'application de liste.

Cet article couvre les sujets suivants :

1. Créer une application Vue

2 Créer une liste

3. Ajouter une nouvelle entrée

4. Créez une application Vue

Nous devons installer Vue.js. Il peut être installé via CDN ou via le gestionnaire de packages npm. Si vous souhaitez installer via un CDN, vous pouvez l'obtenir depuis : https://unpkg.com/vue@next/dist/vue.global.js. Si vous souhaitez installer à l'aide du gestionnaire de packages npm, vous pouvez utiliser la commande suivante dans le terminal :

npm install vue

Une fois l'installation terminée, nous pouvons maintenant créer une instance Vue comme suit :

const app = Vue.createApp({
});

Ensuite, nous définirons le modèle dans l'instance, les données, les méthodes et les propriétés calculées.

2. Créez une liste

Nous utiliserons l'instruction v-for pour parcourir les données de la liste. Supposons que nous ayons un tableau qui stocke les données des éléments de liste. Nous pouvons déclarer ce tableau comme modèle de données dans l'instance Vue comme suit :

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' }
      ]
    }
  }
});

Maintenant, nous devons utiliser la directive v-for dans le modèle pour parcourir ce tableau et afficher les données pour chaque élément. Pour ce faire, nous ajouterons le code suivant au modèle Vue :

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

Le code ci-dessus utilisera la directive v-for pour parcourir le tableau de données et fournir un identifiant unique pour chaque élément item à l'aide du mot-clé :key.

Nous avons maintenant fini de créer la liste.

3. Ajouter de nouveaux éléments

Nous utiliserons la directive v-model fournie par Vue pour créer un nouveau formulaire de saisie et de soumission de liste. La directive v-model permet de lier les valeurs d'entrée aux composants Vue. L'utilisation de la directive v-model est en fait la manière dont nous utilisons généralement les zones de saisie de texte, et elle mettra automatiquement à jour la liaison de données bidirectionnelle.

Pour ajouter un nouvel élément de liste, nous devons afficher un formulaire et collecter de nouvelles données à partir du formulaire. Nous créons le formulaire en utilisant Vue.js comme indiqué ci-dessous :

<template>
  <div>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItem" placeholder="Add a new item">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

Nous utilisons le modificateur d'événement @submit.prevent sur le formulaire afin que le formulaire ne soit jamais réellement soumis. Au lieu de cela, il déclenche le gestionnaire d'événements que nous avons lié à la méthode addItem. Cette méthode ajoutera un nouvel élément au tableau de données. 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变量，以便在编辑模式下隐藏显示条目名称，如下所示：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span v-if="!editing || currentItem !== item">{{ item.name }}</span>
      <span v-else><input type="text" v-model="currentItem.name"></span>
      <button @click="editItem(item)" v-if="!editing">Edit</button>
      <button @click="saveItem()" v-if="editing">Save</button>
    </li>
  </ul>
</template>

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

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

Comment la directive v-model est-elle liée à la zone de texte réservée en entrée ? Nous devons définir une nouvelle variable newItem dans le modèle de données du composant Vue, comme indiqué ci-dessous :

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span v-if="!editing || currentItem !== item">{{ item.name }}</span>
      <span v-else><input type="text" v-model="currentItem.name"></span>
      <button @click="editItem(item)" v-if="!editing">Edit</button>
      <button @click="saveItem()" v-if="editing">Save</button>
      <button @click="deleteItem(item)">Delete</button>
    </li>
  </ul>
  <div>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItem" placeholder="Add a new item">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

Dans la méthode addItem, nous insérons une nouvelle variable au niveau fin de l’objet de projet du tableau et fournissez un ID unique pour le nouvel objet de projet. Après avoir ajouté l'élément, nous réinitialiserons newItem avec une chaîne vide. Nous avons maintenant implémenté la fonctionnalité permettant d'ajouter de nouveaux éléments à un tableau.

4. Modifier les éléments

Notre objectif est maintenant d'ajouter un bouton d'édition à chaque élément. Lorsque vous cliquez sur le bouton, le nom de l'élément peut être modifié. Cette fonctionnalité d'édition est obtenue en liant v-model à l'élément actuel dans le modèle de données et en affichant un bouton de sauvegarde. Vous pouvez placer un bouton d'édition à côté de chaque élément qui passe en mode édition lorsque vous cliquez dessus.

Tout d'abord, nous devons définir une variable currentItem. Cette variable spécifiera l'élément en cours d'édition. Nous devons également définir la variable editing pour masquer le nom de l'entrée en mode édition, comme ceci :

rrreee

Maintenant, nous devons afficher le bouton d'édition dans chaque élément d'élément. Lorsque vous cliquez sur le bouton Modifier, nous devons passer en mode édition afin de pouvoir commencer à éditer le projet en cours. Nous pouvons définir le bouton d'édition pour chaque élément en utilisant le code suivant : 🎜rrreee🎜 Nous basculons l'élément de texte de secours et modifions la zone de saisie de texte pour afficher ou masquer le nom de l'élément en utilisant le v-if directif. Lorsque nous utilisons le mode édition, saisissez ou modifiez le nom du projet dans la zone de texte d'édition. Le mode édition peut être quitté en cliquant sur le bouton Enregistrer. 🎜🎜5. Supprimer des éléments🎜🎜Nous devons maintenant ajouter une fonction pour supprimer des éléments. Nous devons ajouter un bouton de suppression pour chaque élément. Lorsque nous cliquons sur le bouton Supprimer, nous supprimerons cet élément du tableau de données. Nous utiliserons la méthode Array.prototype.indexOf() de JavaScript pour rechercher et supprimer des éléments. 🎜rrreee🎜 Nous pouvons maintenant ajouter un bouton de suppression à chaque élément. Lorsque l’on clique sur le bouton Supprimer, nous pouvons appeler la méthode deleteItem(). 🎜rrreee🎜Nous avons appris à utiliser Vue.js pour ajouter, supprimer, modifier et vérifier la page de liste. La simplicité et la facilité d'utilisation de Vue en font un choix très puissant pour gérer facilement la plupart des opérations pour les applications de liste. 🎜🎜Vue rend non seulement le code plus facile à comprendre, mais nous permet également de créer rapidement des applications Web puissantes. Créer une page de liste pour n'importe quel projet est devenu plus facile avec l'aide de Vue.js. 🎜

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!