租用问题

质量为本、客户为根、勇于拼搏、务实创新

< 返回租用问题列表

vue实现搜索框模糊查询的有什么方法,vue搜索框模糊查询标题作者名等信息

发布时间:2023-08-04 10:53:53

vue实现搜索框模糊查询的有甚么方法

Vue实现搜索框模糊查询的方法有以下几种:
1. 使用computed属性:在Vue组件的computed选项中定义一个过滤函数,根据输入的关键词对数据进行挑选。
```javascript
computed: {
filteredData() {
return this.dataList.filter(item => item.name.includes(this.keyword));
}
}
```
2. 使用watch属性:在Vue组件的watch选项中监听输入框的变化,然后根据关键词进行挑选。
```javascript
watch: {
keyword: {
handler(newKeyword) {
this.filteredData = this.dataList.filter(item => item.name.includes(newKeyword));
},
immediate: true
}
}
```
3. 使用自定义指令:自定义一个v-filter指令,通过钩子函数bind和update监听输入框的变化,然后根据关键词进行挑选。
```javascript
Vue.directive('filter', {
bind(el, binding) {
el.addEventListener('input', function() {
const keyword = el.value;
binding.value(keyword);
});
},
update(el, binding) {
const keyword = el.value;
binding.value(keyword);
}
});

methods: {
filterData(keyword) {
this.filteredData = this.dataList.filter(item => item.name.includes(keyword));
}
}
```
以上是一些常见的实现搜索框模糊查询的方法,具体可以根据自己的需求选择合适的方式。