0
点赞
收藏
分享

微信扫一扫

replaceAll用法 (vue搜索框过滤数据高亮显示)

中间件小哥 2022-04-03 阅读 55

举例:vue搜索框过滤数据高亮显示

在计算属性里面写一个方法
先用filter过滤item

然后用indexof方法查找是否包含 item. name . index0f(this.txt) > -1

(indexof>-1表示包含,this.txt是是你上面v-model绑定的)

然后再用map方法映射出来一个新的数组return 出来

computed: {
     reslist() {
      return this.list
        .filter((item) => item. name . index0f(this.txt) > -1) 
        .map(item=>{
          return this.txt
             ? { 
                ... item,
               showText: item. name . replaceAll(
               this.txt,
               `<span>${this.txt)</span>` 
               ),
             }
              :{...item,showText:item.name};       
           });
       },
}

然后上面需要写的是绑定你用的方法


 

 

举报

相关推荐

0 条评论