How to use Vue form processing to implement form data filtering and filtering

How to use Vue form processing to implement form data filtering and filtering

With the development of web applications, users have more and more demands for data filtering and filtering high. In Vue.js, we can use form processing to implement data filtering and filtering functions, allowing users to filter and find the required data according to their own needs. This article will introduce how to use Vue form processing to implement data filtering and filtering functions, and attach corresponding code examples.

First, we need to prepare a list containing data. Suppose we have a list containing user information. Each user has three attributes: name, age and gender. We can define an array named users, which contains information about all users. As shown below:

data() {
  return {
    users: [
      { name: '张三', age: 25, gender: '男' },
      { name: '李四', age: 30, gender: '女' },
      { name: '王五', age: 28, gender: '男' }
    ],
    filteredUsers: []
  }
}

Next, we need to create a form in the Vue template for user input of filter conditions. This form can contain multiple inputs for entering different filtering criteria. In this example, we will create a text input box for filtering by name, a selection box for filtering by age, and a radio button for filtering by gender. As shown below:

<form @submit.prevent="filterUsers">
  <label for="name">姓名:</label>
  <input type="text" id="name" v-model="name">

  <label for="age">年龄:</label>
  <select id="age" v-model="age">
    <option value="">不限</option>
    <option value="20">20岁以下</option>
    <option value="30">30岁以下</option>
    <option value="40">40岁以下</option>
    <option value="40+">40岁以上</option>
  </select>

  <label for="gender">性别:</label>
  <input type="radio" id="gender" value="" v-model="gender">不限
  <input type="radio" id="gender" value="男" v-model="gender">男
  <input type="radio" id="gender" value="女" v-model="gender">女

  <button type="submit">筛选</button>
</form>

In this form, we use the v-model directive to bidirectionally bind the input value of the form to the data of the Vue instance. In this way, Vue will automatically update the value of the data when the user enters filter conditions.

Next, we need to define a method in the Vue instance to handle the form submission event, that is, to filter and filter the data. In this method, we will filter the data based on the filter conditions entered by the user and save the filter results to a new array filteredUsers. As shown below:

methods: {
  filterUsers() {
    this.filteredUsers = this.users.filter(user => {
      let nameMatch = true;
      let ageMatch = true;
      let genderMatch = true;

      if (this.name) {
        nameMatch = user.name.includes(this.name);
      }

      if (this.age) {
        if (this.age === '20') {
          ageMatch = user.age < 20;
        } else if (this.age === '30') {
          ageMatch = user.age < 30;
        } else if (this.age === '40') {
          ageMatch = user.age < 40;
        } else if (this.age === '40+') {
          ageMatch = user.age >= 40;
        }
      }

      if (this.gender) {
        genderMatch = user.gender === this.gender;
      }

      return nameMatch && ageMatch && genderMatch;
    });
  }
}

In this method, we use the filter method of Array to filter the user list based on the input filter conditions. Compare the user's attribute values ​​​​based on the entered name, age, and gender. If the filter conditions are matched, the user is added to the filteredUsers array.

Finally, we display the filter results in the template. As shown below:

<div v-for="user in filteredUsers" :key="user.name">
  <p>{{ user.name }}</p>
  <p>{{ user.age }}</p>
  <p>{{ user.gender }}</p>
</div>

Through the v-for instruction, we traverse the filteredUsers array and display the name, age and gender of each user.

So far, we have completed the function implementation of data filtering and filtering based on Vue form processing. After the user enters the filtering conditions, the page will automatically filter and display the data based on the conditions. If necessary, we can also optimize and expand the code to add more filtering conditions and functions.

Summary:
This article introduces how to use Vue form processing to implement data filtering and filtering functions. By creating a form in a Vue template and using the v-model directive to bidirectionally bind the form's input value to the data in the Vue instance, we can obtain the user's filtering conditions in real time. Next, by defining a method to handle the form submission event and filtering and filtering the data based on the filtering conditions entered by the user, we can obtain a collection of data that meets the conditions. Finally, by iterating through the filter results in the template, we can display the filtered data to the user. This Vue-based form processing method allows users to flexibly filter and find the required data according to their own needs, improving the user experience.

The above is the detailed content of How to use Vue form processing to implement form data filtering and filtering. For more information, please follow other related articles on the PHP Chinese website!