百度怎么优化网站排名,如何为网站引流,网站建设辅助,外贸公司网站空间Vue3 模糊搜索筛选
环境#xff1a; vue3 tselement plus 目标#xff1a; 输入框输入内容#xff0c;对展示的列表进行模糊搜索筛选匹配的内容。 代码如下#xff1a;
div stylemargin-top: 50pxel-input v-modelvalueInput size vue3 tselement plus 目标 输入框输入内容对展示的列表进行模糊搜索筛选匹配的内容。 代码如下
div stylemargin-top: 50pxel-input v-modelvalueInput sizelarge stylewidth: 200px placeholder请输入 keyupsearchFn/el-inputulli v-foritem in valList{{item}}/li/ul
/divscript langts setup
import {computed, ref} from vueconst list[adfn,acddfN,23DNF,n3BF7,3bedf]
const valList ref([])
const valueInputref()
const searchFn computed(() {valList.value []list.forEach((item: any) {if (item.search(valueInput.value)! -1) {valList.value.push(item)}})
})
/script输入内容 注意此时搜索是区分大小写的接下来改造一下让输入框搜索可以不区分大小写进行筛选 改造代码如下
const searchFn computed(() {valList.value []list.forEach((item: any) {/* RegExp对文本进行模式匹配的“搜索和替换”功能 i就是执行不区分大小写的匹配 */if (item.search(new RegExp(valueInput.value, i))! -1) {valList.value.push(item)}})
})效果
