Vue.js 前端模糊查询实现：使用 JavaScript 字符串方法

在 Vue.js 前端，可以使用 JavaScript 的字符串方法来进行模糊查询。以下是一个简单的示例：

<template>
  <div>
    <input type='text' v-model='searchValue' @input='filterItems' placeholder='搜索...'>
    <ul>
      <li v-for='item in filteredItems' :key='item.id'>{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橘子' },
        { id: 4, name: '西瓜' }
      ]
    };
  },
  computed: {
    filteredItems() {
      if (this.searchValue === '') {
        return this.items; // 如果搜索值为空，则返回全部项
      } else {
        return this.items.filter(item => {
          return item.name.toLowerCase().includes(this.searchValue.toLowerCase());
        });
      }
    }
  },
  methods: {
    filterItems() {
      // 过滤项的方法可以放在computed属性中，也可以放在methods中
      // 如果放在methods中，需要在input的@input事件中调用filterItems方法
    }
  }
};
</script>

上述代码中，通过v-model指令将输入框的值绑定到searchValue属性上，然后在computed属性中使用filter方法对items进行过滤操作，将符合条件的项返回给模板进行渲染。在filter方法中，使用includes方法来判断搜索值是否包含在项的名称中，忽略大小写。