需要一段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模糊查询代码

假设你有一个包含用户信息的数组 `users`，每个用户对象都有一个 `name` 属性。现在你想根据用户输入的关键字做模糊查询，并将匹配的结果展示在页面上。下面是一个简单的 Vue 3 组件代码示例：

<template>
  <div>
    <input v-model="keyword" placeholder="输入关键字">
    <ul>
      <li v-for="user in filteredUsers">{{ user.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' },
        { id: 4, name: 'David' },
      ],
      keyword: ''
    }
  },
  computed: {
    filteredUsers() {
      const keyword = this.keyword.toLowerCase()
      return this.users.filter(user => user.name.toLowerCase().includes(keyword))
    }
  }
}
</script>

上面的代码中，我们使用了 Vue 3 的 `ref` 和 `computed` 函数来创建响应式数据 `users` 和计算属性 `filteredUsers`。`ref` 函数用于包装普通的 JavaScript 对象，使其变成响应式的，而 `computed` 函数则用于创建计算属性，它会根据依赖的数据自动计算出一个新的值。

在模板中，我们使用 `v-model` 指令将用户输入的关键字绑定到 `keyword` 变量上，然后使用 `v-for` 指令遍历 `filteredUsers` 数组，将匹配的用户信息展示在页面上。在 `filteredUsers` 计算属性中，我们使用 `filter` 函数对用户数组进行过滤，只保留那些 `name` 属性中包含关键字的用户对象。注意，在过滤之前，我们将关键字和用户名都转换成小写字母，以便不区分大小写地进行匹配。