Vue實現搜索框模糊查詢的方法有以下幾種:
computed: {
filteredData() {
return this.dataList.filter(item => item.name.includes(this.keyword));
}
}
watch: {
keyword: {
handler(newKeyword) {
this.filteredData = this.dataList.filter(item => item.name.includes(newKeyword));
},
immediate: true
}
}
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);
}
});
<template>
<input v-filter="filterData" />
</template>
methods: {
filterData(keyword) {
this.filteredData = this.dataList.filter(item => item.name.includes(keyword));
}
}
以上是一些常見的實現搜索框模糊查詢的方法,具體可以根據自己的需求選擇適合的方式。