写一段模糊查询的vue2代码
时间: 2023-02-25 19:46:28 浏览: 94
模糊查询代码
```
<template>
<div>
<input type="text" v-model="searchInput" @input="search"/>
<ul>
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchInput: '',
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
},
computed: {
filteredList() {
return this.list.filter(item => item.name.includes(this.searchInput))
}
},
methods: {
search() {
// 在这里可以实现异步搜索
}
}
}
</script>
```
上面的代码实现了一个模糊查询的功能,通过 `v-model` 绑定了一个输入框,当输入框的值改变时,会触发 `search` 方法,在该方法中可以实现异步搜索,也可以不实现。通过计算属性 `filteredList` 筛选出符合条件的列表项,最后通过 `v-for` 指令遍历并展示在页面上。
阅读全文