Vue 搜索功能及搜索结果关键字高亮

先看效果图：

首先实现搜索功能

   景点搜索：
   

 

通过computed计算属性监听搜索内容的变化

computed: {
    list: function () {
         var _this = this;
         var arrByZM = []; // 定义一个新的空数组用来存储匹配到的内容
         for (var i = 0; i < _this.addressList.length; i++) {
             if (_this.addressList[i].name.search(_this.filters.searchVal) != -1 || _this.addressList[i].address.search(_this.filters.searchVal) != -1) {
                 arrByZM.push(_this.addressList[i]); // 将匹配到的内容添加到arrByZM数组中
             }
         }
         return arrByZM;// 返回新的数组
    }
},

以上实现搜索功能

下边实现搜索关键字高亮显示

使用v-html绑定方法名并传递两个参数，第一个参数是：景点名称；第二个参数是：搜索框内输入的搜索内容

    
景点：
    
位置：

 

在methods中添加方法让搜索到的关键字高亮显示（以下提供两种方法，本人使用的是第二种）

methods:{
   brightenKeyword(val, keyword) {
      // 方法1：筛选变色
      // val = val + '';
      // if (val.indexOf(keyword) !== -1 && keyword !== '') {
      //     return val.replace(keyword, '' + keyword + '')
      // } else {
      //     return val
      // }
       // 方法2：用正则表达式
       const Reg = new RegExp(keyword, 'i');
       if (val) {
          const res = val.replace(Reg, `${keyword}`);
             // console.log(res); 
             return res;
       }
   },
},

至此完成搜索效果及搜索结果关键字高亮效果。