vue input输入框关键字筛选检索列表数据展示

Vue是一款流行的前端框架，其快速响应、简单易用的特性使其备受欢迎。在Vue的应用开发中，与用户输入相关的功能是最为常见的需求之一。其中，要实现输入框关键字筛选检索列表数据展示，可以按照以下步骤：

第一步：构建基础页面

首先，需要构建一个基础的页面，包含搜索框和列表。可使用Vue的单文件组件来进行构建，假设为Search.vue组件，其中包含如下HTML代码：

<template>
  <div>
    <input v-model="keyword" />
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

其中，搜索框用v-model绑定keyword变量，可实时获取用户输入的内容，列表使用v-for指令进行循环渲染。

第二步：初始化数据

接下来，需要初始化数据，例如从后端接口获取数据。在Search.vue组件中，可以使用created生命周期钩子来获取并初始化数据。示例代码如下：

<script>
export default {
  data() {
    return {
      keyword: '',
      items: [],
      originalItems: [],
    };
  },
  created() {
    //模拟从后端获取数据
    this.items = [
      { name: '苹果' },
      { name: '香蕉' },
      { name: '橘子' },
      { name: '柚子' },
      { name: '荔枝' },
    ];
    this.originalItems = [...this.items];
  },
};
</script>

其中，使用data函数定义keyword、items、originalItems三个变量，并在created生命周期钩子中模拟从后端获取数据并初始化，同时使用拷贝方式备份数据。这里备份数据是为了便于后面实现筛选功能时，不改变原有数据。

第三步：实现筛选功能

实现筛选功能的关键在于，当用户在搜索框中输入关键字时，需要动态显示相关的列表项。需要对keyword变量进行监听，当keyword发生变化时，筛选items中符合条件的列表项并重新渲染。示例代码如下：

<script>
export default {
  data() {
    return {
      keyword: '',
      items: [],
      originalItems: [],
    };
  },
  created() {
    //模拟从后端获取数据
    this.items = [
      { name: '苹果' },
      { name: '香蕉' },
      { name: '橘子' },
      { name: '柚子' },
      { name: '荔枝' },
    ];
    this.originalItems = [...this.items];
  },
  watch: {
    keyword(val) {
      this.items = this.originalItems.filter((item) =>
        item.name.includes(val)
      );
    },
  },
};
</script>

其中，使用watch监听keyword变量的变化，当keyword发生变化时，使用Array的filter方法对originalItems数据进行筛选，保留包含关键字的列表项，并重新赋值给items进行渲染。

示例一：基础案例

现在可以通过Search.vue组件来实现输入框关键字筛选检索列表数据展示的功能，具体效果可以参考以下代码：

<template>
  <div>
    <input v-model="keyword" />
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      items: [],
      originalItems: [],
    };
  },
  created() {
    //模拟从后端获取数据
    this.items = [
      { name: '苹果' },
      { name: '香蕉' },
      { name: '橘子' },
      { name: '柚子' },
      { name: '荔枝' },
    ];
    this.originalItems = [...this.items];
  },
  watch: {
    keyword(val) {
      this.items = this.originalItems.filter((item) =>
        item.name.includes(val)
      );
    },
  },
};
</script>

示例二：增加异步获取数据

除了从模拟数据获取，一般应用中数据都需要从后端获取。下面是有异步获取数据的实例，由于实际url可能因为私密等原因无法呈现，请读者自行修改代码：

<template>
  <div>
    <input v-model="keyword" />
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      items: [],
      originalItems: [],
    };
  },
  created() {
    this.fetchData();
  },
  watch: {
    keyword(val) {
      this.items = this.originalItems.filter((item) =>
        item.name.includes(val)
      );
    },
  },
  methods: {
    fetchData() {
      axios
        .get('https://youapi.com/items')
        .then((response) => {
          this.items = response.data;
          this.originalItems = [...response.data];
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

注意，需要先安装axios，在vue.config.js导入axios即可。