vue3 如何通过前端代码筛选后端数据列表

在Vue 3中，通过前端代码筛选后端数据列表通常涉及到双向数据绑定和过滤函数的结合。以下是基本步骤：

1. **设置数据**：首先，在组件的数据选项（data）中定义一个数组，它将存储从后端获取的原始数据。

export default {
  data() {
    return {
      dataList: [], // 后端返回的数据列表
      filterInput: '', // 筛选输入框的内容
    };
  },
};

2. **响应式监听**：创建一个计算属性（Computed）来处理筛选逻辑，当`filterInput`值改变时，这个计算属性会触发更新，显示经过筛选后的数据。

computed: {
  filteredData() {
    return this.dataList.filter(item => item.name.includes(this.filterInput)); // 这里假设name字段用于搜索
  },
},

3. **模板展示**：在HTML模板中，使用v-for指令遍历`filteredData`，而不是直接使用`dataList`，这样只有匹配筛选条件的项才会被渲染出来。

<template>
  <div>
    <input v-model="filterInput" placeholder="请输入筛选内容">
    <ul>
      <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

4. **事件管理**：如果你需要实时搜索，可以在输入框上添加`@input`事件监听器，这样每次用户键入都会触发筛选。

<input type="text" v-model="filterInput" @input="applyFilter">

methods: {
  applyFilter() {
    this.filteredData = this.dataList.filter(item => item.name.includes(this.filterInput));
  },
},