前端实现模糊查询功能

<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>