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

在 Vue3 中，通过前端代码筛选后端数据通常涉及到使用 `v-model` 和数组操作，以及事件驱动的数据绑定。这里有一个简单的示例：

1. **数据绑定**:
首先，你需要从后端获取数据并将其绑定到Vue组件的 `data` 或者 ` computed` 属性中。例如：

<template>
  <div>
    <input v-model="searchTerm" placeholder="搜索...">
    <ul>
      <li v-for="(item, index) in filteredData" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 后端返回的数据数组
      searchTerm: '',
    };
  },
  computed: {
    filteredData() {
      return this.items.filter(item => item.name.includes(this.searchTerm));
    },
  },
};
</script>

在这个例子中，`filteredData` 是一个计算属性，它会根据用户输入的 `searchTerm` 过滤出包含该关键词的项。

2. **搜索触发**:
用户输入搜索内容时，可以监听输入框的 `input` 事件来实时更新筛选结果：

<template>
...
<input @input="applySearch">
...
</template>

<script>
methods: {
  applySearch() {
    this.filteredData = this.items.filter(item => item.name.includes(this.searchTerm));
  },
}
</script>