需要一段vue2模糊查询的代码

以下是一个简单的 Vue2 模糊查询的代码示例：

<template>
  <div>
    <input type="text" v-model="searchTerm" placeholder="输入关键词">
    <ul>
      <li v-for="item in filteredItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '草莓', '蓝莓'],
      searchTerm: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.toLowerCase().includes(this.searchTerm.toLowerCase()))
    }
  }
}
</script>

这段代码实现了一个简单的模糊查询功能，用户可以在输入框中输入关键词，页面会实时显示包含该关键词的水果列表。

相关问题

我需要一段vue2模糊查询的代码

### 回答1：
您好，以下是一段简单的 vue2 模糊查询的代码示例：

<template>
  <div>
    <input type="text" v-model="query" placeholder="请输入查询内容">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      list: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'cherry' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.name.includes(this.query))
    }
  }
}
</script>

这段代码实现了一个简单的模糊查询功能，您可以在文本框中输入要查询的内容，列表会根据您的输入实时进行筛选。希望这段代码对您有帮助！

### 回答2：
Vue2中的模糊查询可以借助computed属性和filter函数实现。下面是一个简单的例子：

HTML部分：

<div id="app">
  <input type="text" v-model="keyword" placeholder="请输入关键字">
  <ul>
    <li v-for="item in filteredList">{{ item }}</li>
  </ul>
</div>

Vue部分：

new Vue({
  el: "#app",
  data: {
    keyword: "",
    list: ["苹果", "香蕉", "橘子", "西瓜", "葡萄"]
  },
  computed: {
    filteredList: function() {
      var keyword = this.keyword.toLowerCase();
      return this.list.filter(function(item) {
        return item.toLowerCase().indexOf(keyword) > -1;
      });
    }
  }
})

在上面的代码中，通过使用v-model指令将输入框的值与Vue实例中的keyword属性进行双向绑定。在computed属性filteredList中，通过调用filter函数对list进行过滤，只返回包含关键字的项。最后通过v-for指令将筛选后的结果渲染到页面上。

这样就实现了一个简单的Vue2模糊查询的功能。当用户在输入框中输入关键字时，页面上的列表会根据关键字进行实时过滤显示。

需要一段vue3模糊查询的代码

以下是一个简单的 Vue 3 模糊查询示例代码，用于从列表中筛选出匹配关键词的项：

<template>
  <div>
    <input v-model="searchKey" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' },
        { id: 4, name: 'Durian' }
      ],
      searchKey: ''
    };
  },
  computed: {
    filteredItems() {
      const searchKey = this.searchKey.toLowerCase();
      return this.items.filter(item => item.name.toLowerCase().includes(searchKey));
    }
  }
};
</script>

在这个例子中，使用了 Vue 3 中的 `ref` 和 `computed` 函数。`ref` 用于创建响应式数据，`computed` 用于创建计算属性，当 `searchKey` 发生变化时，`filteredItems` 会重新计算，筛选出包含关键词的项。