vue中的搜索关键字实例讲解

<label>
    搜索关键字：
    <input type="search" name="" id="" value="" v-model="keywords"/>
</label>

<tr v-for="item in search(keywords)" :key="item.id">
    <td>{{ item.id }}</td>
    <td v-text="item.name"></td>
    <td>{{ item.ctime }}</td>
</tr>

data:{
    id:'',
    name:'',
    keywords:'',
    list:[
        {id:1,name:'李白',ctime:new Date()},
        {id:2,name:'关羽',ctime:new Date()},
        {id:3,name:'韩信',ctime:new Date()},
        {id:4,name:'花木兰',ctime:new Date()},
        {id:5,name:'貂蝉',ctime:new Date()},
        {id:6,name:'露露',ctime:new Date()},
        {id:6,name:'大乔',ctime:new Date()},
        {id:6,name:'荆轲',ctime:new Date()},
        {id:6,name:'项羽',ctime:new Date()},
        {id:6,name:'典韦',ctime:new Date()},
        {id:7,name:'小乔',ctime:new Date()}
    ]
},

methods:{
        search(keywords) {//根据关键字,进行数据的搜索
                var newList = []
                    this.list.forEach(item => {
                if(item.name.indexOf(keywords) != -1){
                            newList.push(item)
                    }
                })
                return newList
            }
    }

methods:{
    search(keywords) {//根据关键字,进行数据的搜索
                //注意: forEach    some    filter    findIndex    这些都属于数组的新方法,
                //都会对数组中的每一项,进行遍历,执行相关的操作;
                return this.list.filter(item=>{
                    //if(item.name.indexOf(keywords) != -1)
                    
                    //注意: ES6 中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串')
                    //如果包含,则返回 true ,否则返回 false
                    //contains  
                    if(item.name.includes(keywords)){
                        return item
                    }
                })        
                }
            }

<div>
   <span>景点搜索：</span>
   <el-input prefix-icon="el-icon-search" placeholder="请输入景点名称或地区进行搜索" v-model="filters.searchVal" clearable></el-input>
</div>

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;// 返回新的数组
    }
},

<div class="xph-list-r">
    <div>景点：<span v-html="brightenKeyword(item.name, filters.searchVal)" ></span></div>
    <div>位置：<span v-html="brightenKeyword(item.address, filters.searchVal)" ></span></div>
</div>

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