Ajout et suppression de données Vue

Vue.js est un framework front-end très populaire. Sa principale caractéristique est l'utilisation du modèle architectural MVVM (Model-View-ViewModel). La liaison de données de Vue.js est l'une de ses fonctionnalités les plus importantes. Cette fonctionnalité permet de synchroniser les données et les vues.

Dans Vue.js, nous pouvons effectuer des opérations telles que l'ajout, la suppression, la vérification et la modification de manière simple. Cet article explorera les opérations d'ajout et de suppression de données dans Vue.js.

1. Augmentation des données

Dans Vue.js, nous pouvons utiliser les instructions v-bind et v-model pour lier les données. La directive v-bind est utilisée pour lier les données aux éléments HTML, et v-model est utilisée pour lier les éléments de formulaire et les données ensemble.

Lorsque des données sont ajoutées, nous pouvons utiliser la méthode Vue.set fournie par Vue.js pour ajouter dynamiquement une propriété, et en même temps nous assurer que Vue peut surveiller le changement de cette propriété lors de l'utilisation de la méthode $set sur l'objet .

Ce qui suit est un exemple d'ajout de données.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
      </li>
    </ul>
    <form>
      <input v-model="name" type="text" placeholder="Name">
      <input v-model="age" type="number" placeholder="Age">
      <button type="submit" @click.prevent="addItem">Add Item</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ],
      name: "",
      age: ""
    };
  },
  methods: {
    addItem() {
      this.items.push({
        name: this.name,
        age: this.age
      });
      this.name = "";
      this.age = "";
    }
  }
};
</script>

Dans l'exemple ci-dessus, nous utilisons la directive v-for pour afficher une liste. Dans le formulaire form, nous utilisons la directive v-model pour lier les valeurs de nom et d'âge. Lorsque vous cliquez sur le bouton "Ajouter un élément", la méthode addItem sera déclenchée, ajoutera un nouvel objet au tableau d'éléments via la méthode this.items.push(), puis effacera la zone de saisie dans le formulaire.

2. Suppression des données

La méthode de suppression des données dans Vue.js est très similaire à la méthode d'ajout de données. Nous pouvons utiliser la méthode d'épissage fournie par Vue.js pour supprimer des éléments du tableau, tout en garantissant que Vue surveille. ce changement.

Ce qui suit est un exemple de suppression de données.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} ({{ item.age }})
        <button @click.prevent="removeItem(index)">Remove Item</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "John", age: 25 },
        { name: "Jane", age: 30 },
        { name: "Jim", age: 45 }
      ]
    };
  },
  methods: {
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

Dans l'exemple ci-dessus, nous utilisons la directive v-for pour afficher une liste. Sur chaque élément de la liste, nous avons ajouté un bouton "Supprimer l'élément". Lorsque vous cliquez sur le bouton, la méthode RemoveItem sera déclenchée pour supprimer l'élément de tableau de l'index correspondant via la méthode this.items.splice().

3. Résumé

En général, les opérations d'ajout et de suppression de données de Vue.js sont très simples. Nous pouvons facilement exploiter les données grâce aux méthodes fournies par Vue.js et laisser Vue.js surveiller les modifications des données à mettre à jour. la vue de manière synchrone. Pendant le développement, nous pouvons choisir d'utiliser différentes méthodes pour ajouter et supprimer des données selon différents scénarios.

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!