<template>
<div>
<input type="text" v-model="searchKeyword" placeholder="请输入搜索关键词" />
<ul>
<li v-for="(item, index) in filteredList" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
list: ['苹果', '香蕉', '西瓜', '草莓', '蓝莓', '菠萝'],
searchKeyword: '',
}
},
computed: {
filteredList () {
const reg = new RegExp(this.searchKeyword, 'i') // 创建不区分大小写的正则表达式
return this.list.filter(item => reg.test(item)) // 使用正则表达式进行数组筛选
}
}
}
</script>