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

2023-11-13

举例: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};       
           });
       },
}

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


 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

replaceAll用法 (vue搜索框过滤数据高亮显示) 的相关文章

随机推荐

  • #1295-D: Deprecated declaration I2C_Start - give arg types

    KEIL5编译器报警告 警告内容如下 1295 D Deprecated declaration I2C Start give arg types 警告原因无参数函数的函数声明没有标明参数为void型 在函数声明中加入void即可 警告代码
  • 1.Kubernetes基础入门学习概述系统架构及组件浅析

    目录 0x00 基础简述 1 发展经历 2 简要介绍 3 系统架构 Borg 系统 Kubernetes 系统 0x01 组件浅析 1 Kubernetes Master 2 Kubernetes Node 3 Kubernetes 插件
  • Keras利用卷积神经网络(CNN)识别手写数字(环境python3.5)

    今天介绍如何利用卷积神经网络进行MNIST数据集的手写数字识别 即将手写数字图像images识别为数字标签labels 目录 数据预处理 模型建立 评估模型准确率 进行预测 建模思路如下图 数据预处理 MNIST数据集共有训练数据60 00
  • json to dart工具

    工具链接https javiercbk github io json to dart
  • 单片机开发---ESP32S3移植lvgl+触摸屏

    书接上文 单片机开发 ESP32 S3模块上手 本章内容 熟悉一下ESP32S3的开发 修改范例程序的lvgl 使之能够匹配现在的显示屏 具体工作大概为通过SPI接口连接一块SPI串口屏幕 并且适配lvgl 最后加上触摸屏作为输入 屏幕 用
  • 判断是pc端还是移动端

    Navigator对象 Navigator 对象包含有关浏览器的信息 下面的userAgent 属性是一个只读的字符串 声明了浏览器用于 HTTP 请求的用户代理头的值 所以我们可以通过判断navigator useragent里面是否有某
  • 微信小程序-拒绝了语音权限后,重新授权

    效果图 第一步 封装在utils里 哪个页面需要的话 直接调用 export function impower var t this wx authorize scope scope record success res fail wx s
  • 递归解决八皇后回溯算法

    问题简述 八皇后问题是一个古来而著名的问题 该问题是19世纪著名的数学家高斯同学提出来的 在8 8的国际象棋上摆放八个皇后 使其不能互相的攻击 也就是说 任意的两个皇后不能放在同一行或则是同一个列或者是同一个对角线上 问有多少个摆放的方法
  • Skywalking-9.6.0系列之本地源码编译并启动

    Skywalking相信有很多人使用过 通过容器或者下载安装包进行安装的 今天从源代码角度 拉取 构建 启动 官方文档步骤简洁明了 我这边会结合自己遇到的一些问题做出总结 当前构建资源版本 MAC 10 15 7 IDEA 2021 2 n
  • 正版steam gta5如何免登录教程

    gta5中文叫做侠盗猎车手5 是一款围绕犯罪为主题的开放式动作冒险游戏 凭借其全新的雷霆引擎 不一样的战斗方式 乃至今日仍受到众多玩家的喜爱 这么受欢迎的游戏当然需要付费购买啦 这可让许多小伙伴们都望而止步 为了满足玩家们的游戏需求 小编此
  • 常用的加解密技术(2)

    公开密钥体系 公开密钥密码体制是现代密码学的最重要的发明和进展 一般理解密码学 Cryptography 就是保护信息传递的机密性 但这仅仅是当今密码学主题的一个方面 对信息发送与接收人的真实身份的验证 对所发出 接收信息在事后的不可抵赖以
  • python切片的总结

    目录 介绍切片 格式 1 切割单个值 2 切割完整对象 3 start和end全部取正数的情况 4 start和end全部取负数的情况 5 start和end正负混合情况 7 切片中的三个参数为表达式 8 切片可以操作其他的对象 总结 介绍
  • Centos7 防火墙详细操作

    centos7 通过firewall cmd命令添加防火墙白名单 1 查看防护墙状态 firewall cmd state 或 systemctl status firewalld active running gt 表示防火墙已经开启 i
  • iOS进阶_NSURLConnection(被弃用的原因:Connection的缺点)

    NSURLConnection下载 我们在前面的文章中介绍了MAC电脑搭建Apache服务器 在Sites文件夹中放置一个视频文件MVVM mp4 pbb 通过NSURLConnection进行下载 访问http localhost 我们可
  • 局部变量和静态局部变量

    一 局部变量 局部变量也叫auto自动变量 auto可写可不写 一般情况下代码块 内部定义的变量都是自动变量 它有如下特点 1 作用域 a 在一个函数内定义 只在函数范围内 也就是在定义变量的 之内 有效 b 在复合语句中定义 只在复合语句
  • 解决GridView控件的居中问题

    先简单介绍一下GridView控件 它被称为列表视图控件 用于在一个列表中显示数据源的值 其中每列表示一个字段 每行表示一条记录 简单来讲 就是一个列表 可以将数据源绑定到该列表控件上 在浏览器上显示出来就是存放着数据的列表 我在VS201
  • jetbrains IDE 关闭自动提示

    去掉Auto display code completion前面的对勾
  • python基础知识之函数的定义及用法

    目录 前言 一 函数的定义和调用 1 函数的作用 2 函数名的命名规范 3 函数的返回值 return 4 调用函数 二 函数的参数 1 函数形参和实参 2 参数传递的两种形式 3 函数定义的三种形参 三 函数的作用域 1 全局变量 2 局
  • Android 5.0学习之AnimatedVectorDrawable

    http blog csdn net cym492224103 article details 41677825 前言 示例代码地址 animated vector drawable 几句代码 几个配置文件即可实现以上效果 流畅的体验 无缝
  • replaceAll用法 (vue搜索框过滤数据高亮显示)

    举例 vue搜索框过滤数据高亮显示 在计算属性里面写一个方法 先用filter过滤item 然后用indexof方法查找是否包含 item name index0f this txt gt 1 indexof gt 1表示包含 this t