vue2 form add, delete, check business logic

With the continuous development of modern web applications, forms are still an important interaction method between users and applications. As a popular front-end framework, Vue2 provides convenient form processing methods, which can quickly implement addition, deletion and query operations of forms. Before implementing Vue2 form addition and deletion query, we first need to understand what Vue2 is and its basic concepts.

Vue2 is a lightweight JavaScript framework that supports progressive development and is a way to quickly build user interfaces. The core idea of ​​Vue2 is to separate the DOM from JavaScript code, bind the object model to the view, and build applications through componentization. A major feature of Vue2 is the data-driven view. When the state variable of the component changes, Vue2 will automatically update the corresponding view on the page. Vue2 also supports features such as instructions and life cycle hooks, which can easily implement complex business logic.

Next, we will show how to use Vue2 to implement the business logic of form addition, deletion and query. In this example, we will use Vue2 to create a simple to-do list application. We will use Vue2's component mechanism to build a list form, and implement add, delete, and check operations through data transfer between components. Here is the list of components we will create:

1. TodoList - List component
2. TodoItem - List item component

TodoList component will be used to display all the to-do items A list of to-do items, while the TodoItem component will be used to display the content of a single to-do item. We will create multiple TodoItem components in the TodoList component to build a complete to-do list.

First, we need to create a TodoItem component to represent a single to-do item content. We will use props to pass data to the component, and these props will be used internally by the component to render the view. We define the following code in the TodoItem component:

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

In the above code, we first define the template file of the component, and use the v-model directive to bidirectionally bind the state of the component to the value of the input box Determine to enable the user to check the to-do items. We also added a "Delete" button, and when the user clicks the button, we emit a "delete-item" event by using the $emit method, which passes the to-do item's data object as a parameter.

Next, we need to use the TodoItem component in the TodoList component to create multiple to-do items. We use the v-for directive to loop through all to-do items and render a TodoItem component on each to-do item. We define the following code in the TodoList component:

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

In the above code, we first define a data list items, which contains three to-do items. We also define a newItemText variable, which is used to store the new to-do content entered by the user. In the template, we use the v-for directive to loop through all to-do items and render each to-do item using the TodoItem component. We also bound the submit event to the form for adding new items and added a new to-do item in the method.

When deleting a to-do item, we use the findIndex method to find the index of the item to be deleted in the form, and use the splice method to delete the item from the list. When the user checks a to-do item, the component's state variable will be updated and bound to the value of the input box using the v-model directive.

Through such a simple example, we can see that using Vue2 to implement form addition, deletion and query is very convenient and fast. In practical applications, we can use Vue2's component mechanism and data binding features to speed up development and reduce the probability of errors, thereby achieving more complex business requirements.

The above is the detailed content of vue2 form add, delete, check business logic. For more information, please follow other related articles on the PHP Chinese website!