vue 模糊搜索

html代码

// input 搜索框
<input type="text" v-model.trim="inputVal" @keyup="serch" />
// 搜索结果显示
<ul>
   <li v-for="(item, index) in vallist" :key="index">
      {{ item.name }}
   </li>
</ul>

js代码

<script>
export default {
  //数据
  data() {
    return {
      inputVal: "", // 搜索框内容
      list: [   // 被搜索的列表
        {
          name: "阿龙",
        },
        {
          name: "阿狸",
        },
        {
          name: "阿里巴巴",
        },
        {
          name: "阿富汗",
        },
        {
          name: "阿根廷",
        },
      ],
      vallist: [], // 搜索结果列表
    };
  },
  //方法
  methods: {
    serch() {
      // 每次搜索前将搜索结果列表清空
      this.vallist = [];
      // 将被搜索列表循环
      this.list.forEach((item) => {
        // 进行判断，如果有符合元素的话
        // search 字符串方法 有符合条件的返回下标，没有的话返回-1
        if (item.name.search(this.inputVal) != -1) {
          // 将其添加到搜索结果列表
          this.vallist.push(item);
        }
      });
    },
  },
};
</script>