前端实现汉字模糊匹配

最新推荐文章于 2024-03-07 14:08:31 发布

KAGHQ

最新推荐文章于 2024-03-07 14:08:31 发布

阅读量628

点赞数 6

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/lrqqhm/article/details/135215052

版权

<!DOCTYPE html>
<html>
<head>
  <title>Vue汉字模糊搜索</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="searchKeyword" placeholder="请输入搜索关键词">
    <ul>
      <li v-for="item in filteredData" :key="item">{{ item }}</li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        searchKeyword: '', // 搜索关键词
        data: [
          "苹果",
          "香蕉",
          "蓝莓",
          "樱桃",
          "葡萄",
          "柠檬",
          "橙子",
          "草莓"
        ]
      },
      computed: {
        filteredData() {
          const keyword = this.searchKeyword.trim(); // 去除首尾空格

          if (keyword) {
            const regex = new RegExp(keyword, 'i'); // 不区分大小写
            return this.data.filter(item => regex.test(item));
          } else {
            return this.data;
          }
        }
      }
    });
  </script>
</body>
</html>