How to filter and sort data in Vue technology development

How to filter and sort data in Vue technology development

In Vue technology development, data filtering and sorting are very common and important functions. Through data filtering and sorting, we can quickly query and display the information we need, improving user experience. This article will introduce how to filter and sort data in Vue, and provide specific code examples to help readers better understand and use these functions.

1. Data filtering

Data filtering refers to filtering out data that meets the requirements based on specific conditions. In Vue, we can filter data through computed attributes or filters.

1. Computed attribute filtering

The computed attribute is a special attribute in Vue, which can dynamically calculate a new value based on dependent data. We can combine the computed attribute and the filter method of the array to implement data filtering.

Suppose we have data of a student list, which contains the students' names and grade information. We need to filter out students with scores greater than 80. The following is a sample code:

<template>
  <div>
    <h1 id="学生列表">学生列表</h1>
    <ul>
      <li v-for="student in filteredStudents" :key="student.id">
        {{ student.name }} - {{ student.score }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', score: 78 },
        { id: 2, name: '李四', score: 89 },
        { id: 3, name: '王五', score: 67 },
        { id: 4, name: '赵六', score: 92 }
      ]
    };
  },
  computed: {
    filteredStudents() {
      return this.students.filter(student => student.score > 80);
    }
  }
};
</script>

In the above code, through the computed attribute filteredStudents, we dynamically calculate the list of students with scores greater than 80 and display them on the page.

2. Filter filtering

Filter is another feature in Vue, which can be used to format data. We can combine filters and array filter methods to filter data.

Continuing to take the student list as an example, we need to filter out students whose names start with "Zhang". The following is a sample code:

<template>
  <div>
    <h1 id="学生列表">学生列表</h1>
    <ul>
      <li v-for="student in students" :key="student.id" v-show="student.name | filterName">
        {{ student.name }} - {{ student.score }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', score: 78 },
        { id: 2, name: '李四', score: 89 },
        { id: 3, name: '王五', score: 67 },
        { id: 4, name: '赵六', score: 92 }
      ]
    };
  },
  filters: {
    filterName: function(value) {
      return value.startsWith('张');
    }
  }
};
</script>

In the above code, we define a filter named filterName to determine whether the student's name starts with "Zhang". Through the v-show command, we display qualified students on the page.

2. Data sorting

Data sorting refers to sorting data according to specified rules. In Vue, we can use the sort method of the array to sort the data.

Continuing to take the student list as an example, we need to sort the student list from high to low according to the students' grades. The following is a sample code:

<template>
  <div>
    <h1 id="学生列表">学生列表</h1>
    <button @click="sortStudents">按成绩排序</button>
    <ul>
      <li v-for="student in students" :key="student.id">
        {{ student.name }} - {{ student.score }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', score: 78 },
        { id: 2, name: '李四', score: 89 },
        { id: 3, name: '王五', score: 67 },
        { id: 4, name: '赵六', score: 92 }
      ]
    };
  },
  methods: {
    sortStudents() {
      this.students.sort((a, b) => b.score - a.score);
    }
  }
};
</script>

In the above code, we added a button to sort by grades in the data. By clicking the button, the student list can be reordered from high to low by grade.

Summary

In Vue technology development, data filtering and sorting are very common and important functions. By using computed attributes and filters, we can easily filter the data; and using the sort method, we can easily sort the data. Hopefully the code examples in this article will help readers better understand and apply these features.

The above is the detailed content of How to filter and sort data in Vue technology development. For more information, please follow other related articles on the PHP Chinese website!