前端通过Vue自己实现输入框模糊筛选数据，并将筛选结果展示

首先，你需要定义一个输入框和一个展示筛选结果的区域。例如：

<template>
  <div>
    <input type="text" v-model="keyword" @input="filterData" placeholder="输入关键词筛选">
    <ul>
      <li v-for="(item, index) in filteredList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

其中，`keyword` 是输入框中的关键词，`filteredList` 是筛选后的结果列表。

接下来，你需要在 Vue 实例中定义数据和筛选函数。例如：

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange', 'peach', 'watermelon'],
      keyword: '',
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.includes(this.keyword));
    },
  },
  methods: {
    filterData() {
      this.filteredList = this.list.filter(item => item.includes(this.keyword));
    },
  },
};
</script>

在上面的代码中，我们定义了一个 `list` 数组，里面存放了需要筛选的数据。在 `computed` 属性中，我们定义了一个 `filteredList` 计算属性，它会根据当前的关键词筛选出符合条件的数据。在 `methods` 属性中，我们定义了一个 `filterData` 方法，它会在输入框的值发生变化时触发，重新计算 `filteredList`。

最后，你只需要在 Vue 实例的模板中使用 `keyword` 和 `filteredList` 就可以实现输入框模糊筛选数据，并将筛选结果展示了。