91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

vue實現搜索框模糊查詢的方法有哪些

vue
小億
335
2023-08-03 23:54:29
欄目: 編程語言

Vue實現搜索框模糊查詢的方法有以下幾種:

  1. 使用computed屬性:在Vue組件的computed選項中定義一個過濾函數,根據輸入的關鍵詞對數據進行篩選。
computed: {
filteredData() {
return this.dataList.filter(item => item.name.includes(this.keyword));
}
}
  1. 使用watch屬性:在Vue組件的watch選項中監聽輸入框的變化,然后根據關鍵詞進行篩選。
watch: {
keyword: {
handler(newKeyword) {
this.filteredData = this.dataList.filter(item => item.name.includes(newKeyword));
},
immediate: true
}
}
  1. 使用自定義指令:自定義一個v-filter指令,通過鉤子函數bind和update監聽輸入框的變化,然后根據關鍵詞進行篩選。
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));
}
}

以上是一些常見的實現搜索框模糊查詢的方法,具體可以根據自己的需求選擇適合的方式。

0
甘洛县| 马尔康县| 嘉义市| 尉犁县| 益阳市| 桐柏县| 南昌县| 禄丰县| 广丰县| 富民县| 吉林市| 莱阳市| 封开县| 棋牌| 东台市| 沈丘县| 锦州市| 商水县| 江陵县| 广宁县| 安丘市| 正安县| 宜章县| 浦县| 上杭县| 海城市| 长治市| 中宁县| 湟中县| 安多县| 蒙山县| 嘉善县| 岗巴县| 昌乐县| 新河县| 德钦县| 安吉县| 陇西县| 巴彦淖尔市| 临潭县| 威宁|