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

HTML输入框模糊查询示例代码：

<label for="search">搜索:</label>
<input type="text" id="search" onkeyup="searchFunction()" placeholder="输入关键词进行搜索...">
<ul id="result"></ul>

JavaScript模糊查询函数：

function searchFunction() {
  // 获取输入框的值
  var input = document.getElementById("search");
  var filter = input.value.toUpperCase();

  // 获取需要查询的列表
  var ul = document.getElementById("result");
  var li = ul.getElementsByTagName("li");

  // 遍历列表，将匹配的项显示出来，未匹配的项隐藏
  for (var i = 0; i < li.length; i++) {
    var a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

Vue输入框模糊查询示例代码：

<template>
  <div>
    <label for="search">搜索:</label>
    <input type="text" id="search" v-model="searchText" placeholder="输入关键词进行搜索...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橘子' },
        { id: 4, name: '菠萝' },
        { id: 5, name: '草莓' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.toLowerCase().includes(this.searchText.toLowerCase());
      });
    }
  }
};
</script>

在Vue中，我们使用`v-model`指令将输入框的值绑定到Vue实例的`searchText`属性上。然后，我们使用计算属性`filteredItems`过滤出匹配的项，并在模板中使用`v-for`指令渲染出来。