formulaire vue2 ajouter, supprimer, vérifier la logique métier

Avec le développement continu des applications Web modernes, les formulaires restent une méthode d'interaction importante entre les utilisateurs et les applications. En tant que framework frontal populaire, Vue2 fournit des méthodes de traitement de formulaires pratiques, qui peuvent rapidement implémenter des opérations d'ajout, de suppression et d'interrogation de formulaires. Avant d'implémenter la requête d'ajout et de suppression de formulaire Vue2, nous devons d'abord comprendre ce qu'est Vue2 et ses concepts de base.

Vue2 est un framework JavaScript léger qui prend en charge le développement progressif et constitue un moyen de créer rapidement des interfaces utilisateur. L'idée principale de Vue2 est de séparer le DOM du code JavaScript, de lier le modèle objet à la vue et de créer des applications via la composantisation. Une fonctionnalité majeure de Vue2 est la vue basée sur les données. Lorsque la variable d'état du composant change, Vue2 mettra automatiquement à jour la vue correspondante sur la page. Vue2 prend également en charge des fonctionnalités telles que les instructions et les hooks de cycle de vie, qui peuvent facilement implémenter une logique métier complexe.

Ensuite, nous montrerons comment utiliser Vue2 pour implémenter la logique métier d'ajout, de suppression et de requête de formulaire. Dans cet exemple, nous utiliserons Vue2 pour créer une application simple de liste de tâches. Nous utiliserons le mécanisme de composants de Vue2 pour créer un formulaire de liste et implémenter des opérations d'ajout, de suppression et de vérification via le transfert de données entre les composants. Voici la liste des composants que nous allons créer :

1. TodoList - Composant de liste
2. TodoItem - Composant d'élément de liste

#🎜🎜 # Le composant TodoList sera utilisé pour afficher une liste de toutes les tâches, tandis que le composant TodoItem sera utilisé pour afficher le contenu d'une seule tâche. Nous allons créer plusieurs composants TodoItem dans le composant TodoList pour créer une liste de tâches complète.

Tout d'abord, nous devons créer un composant TodoItem pour représenter le contenu d'un seul élément de tâche. Nous utiliserons des accessoires pour transmettre des données au composant, et ces accessoires seront utilisés en interne par le composant pour restituer la vue. Nous définissons le code suivant dans le composant TodoItem :

<template>
  <div>
    <input type="checkbox" v-model="completed">{{ item.text }}
    <button @click="deleteItem">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data() {
    return {
      completed: false
    }
  },
  methods: {
    deleteItem() {
      this.$emit('delete-item', this.item)
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons d'abord le fichier modèle du composant et utilisons la directive v-model pour comparer l'état du composant avec le valeur de la zone de saisie Liaison bidirectionnelle pour permettre aux utilisateurs de vérifier les tâches à effectuer. Nous avons également ajouté un bouton "Supprimer", et lorsque l'utilisateur clique sur le bouton, nous émettons un événement "delete-item" en utilisant la méthode $emit, qui transmet l'objet de données de l'élément de tâche en tant que paramètre.

Ensuite, nous devons utiliser le composant TodoItem dans le composant TodoList pour créer plusieurs éléments de tâche. Nous utilisons la directive v-for pour parcourir toutes les tâches et afficher un composant TodoItem sur chaque tâche. Nous définissons le code suivant dans le composant TodoList :

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <todo-item :item="item" @delete-item="deleteItem"></todo-item>
    </div>
    
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemText" required />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      items: [
        { id: 1, text: '完成Vue2表单增删查', completed: false },
        { id: 2, text: '学习JavaScript高级编程', completed: true },
        { id: 3, text: '尝试构建一个全栈应用', completed: false }
      ],
      newItemText: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItemText) {
        let newId = this.items.length + 1
        this.items.push({
          id: newId,
          text: this.newItemText,
          completed: false
        })
        this.newItemText = ''
      }
    },
    deleteItem(item) {
      let index = this.items.findIndex(x => x.id === item.id)
      if (index >= 0) {
        this.items.splice(index, 1)
      }
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons d'abord une liste d'éléments de données, qui contient trois éléments de tâche. Nous définissons également une variable newItemText, qui est utilisée pour stocker le nouveau contenu de tâche saisi par l'utilisateur. Dans le modèle, nous utilisons la directive v-for pour parcourir toutes les tâches et restituer chaque élément de tâche à l'aide du composant TodoItem. Nous avons également lié l'événement submit au formulaire pour ajouter de nouveaux éléments et ajouté un nouvel élément de tâche dans la méthode.

Lors de la suppression d'un élément de tâche, nous utilisons la méthode findIndex pour trouver l'index de l'élément à supprimer dans le formulaire, et utilisons la méthode splice pour supprimer l'élément de la liste. Lorsque l'utilisateur vérifie une tâche à faire, la variable d'état du composant sera mise à jour et liée à la valeur de la zone de saisie à l'aide de la directive v-model.

Grâce à un exemple aussi simple, nous pouvons voir qu'utiliser Vue2 pour implémenter l'ajout, la suppression et la requête de formulaires est très pratique et rapide. Dans des applications pratiques, nous pouvons utiliser le mécanisme de composants et les fonctionnalités de liaison de données de Vue2 pour accélérer le développement et réduire la probabilité d'erreurs, répondant ainsi à des exigences commerciales plus complexes.

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!