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

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

<template>
  <div>
    <input type="text" v-model="searchTerm" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['apple', 'banana', 'cherry', 'date', 'elderberry'],
      searchTerm: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.toLowerCase().includes(this.searchTerm.toLowerCase())
      })
    }
  }
}
</script>

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

相关问题

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

好的，我可以为您提供一段 Vue 3 中的模糊查询代码。

首先，您需要在模板中添加一个输入框，并为其绑定一个响应式数据，例如 `query`：

<template>
  <input v-model="query" placeholder="请输入查询关键字" />
</template>

然后，您可以使用 computed 属性来计算出符合查询条件的数据，例如：

<script>
export default {
  data() {
    return {
      query: '',
      items: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.includes(this.query))
    }
  }
}
</script>

最后，在模板中使用过滤后的数据即可。例如：

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.name">{{ item.name }}</li>
  </ul>
</template>

希望这段代码能帮助您。

我需要一段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模糊查询的功能。当用户在输入框中输入关键字时，页面上的列表会根据关键字进行实时过滤显示。