html输入框模糊查询,vue input输入框模糊查询的示例代码

以下是一个基于Vue的输入框模糊查询示例代码：

<template>
  <div>
    <input type="text" v-model="searchText" placeholder="请输入查询关键字">
    <ul>
      <li v-for="item in filteredItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["苹果", "香蕉", "橘子", "西瓜", "菠萝"],
      searchText: ""
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.toLowerCase().includes(this.searchText.toLowerCase());
      });
    }
  }
};
</script>

在上面的代码中，我们使用了一个 `computed` 属性来实现模糊查询。当用户在输入框中输入关键字时，`filteredItems` 属性会根据输入的关键字动态过滤出匹配的项，并在页面上进行展示。