uniapp 实现搜索使得搜索字体变颜色_uniapp搜索判断字相同加颜色_lyy2665624982的博客-程序员宅基地
html：
<!-- 搜索框 -->
<view class="search-box">
<view class="search-input">
<u--input clearable="true" v-model="searchValue" @confirm="searchClick()" border="none" fontSize="15px"
color="#333" shape="circle" placeholder="请输入关键词搜索" prefixIcon="search"
prefixIconStyle="font-size: 26px;color: #B2B2B2">
</u--input>
<view class="searchbtn" @click="searchClick(searchValue)">搜索</view>
</view>
</view>列表： (要变颜色的地方记得用v-html)
<view class="content-box-item" v-for="(item,index) in pageList" :key="index" @click="toDetile(item.id)">
<!-- 内容图片 2张图片显示样式-->
<view class="content-box-item-imges-class2" v-if="item.contentFile && item.contentFile.length==2">
<!-- 内容标题 -->
<view class="content-box-item-title" v-html="item.depict">
</view>
<view class="list-img2">
<view class="list-img2-box" v-for="(fItem,fIndex) in item.contentFile" :key="fIndex">
<image class="list-img2-img" v-if="isImage(fItem.fileType)" :showMenuByLongpress="false"
:src="fItem.url" mode="aspectFill">
</image>
<video class="list-img2-img" :src="fItem.url" v-else controls></video>
</view>
</view>
</view>
</view>data定义数据：
data() {
return {
searchValue: '', //搜索关键字
searchList: [{
auditTime: null,
browse: 4,
collect: 1,
content: '呵呵哈哈哈或',
contentFile: [{
fileType: 'jpg',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
{
fileType: 'png',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
{
fileType: 'png',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
}
],
createId: null,
createTime: "2022-04-21 15:49:59",
depict: "哈哈呢绒的合法还是进来快捷方式了 ",
enable: null,
id: "1517048004973060097",
isCollect: null,
label: null,
reason: null,
recommend: null,
state: null,
tagsCode: null,
title: "测试",
updateId: null,
updateTime: null,
},
{
auditTime: null,
browse: 4,
collect: 1,
content: '呵呵哈哈哈或',
contentFile: [{
fileType: 'jpg',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
{
fileType: 'png',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
],
createId: null,
createTime: "2022-04-21 15:49:59",
depict: "呢绒的合法还 哈哈是进来快捷方式了 ",
enable: null,
id: "1517048004973060097",
isCollect: null,
label: null,
reason: null,
recommend: null,
state: null,
tagsCode: null,
title: "测试",
updateId: null,
updateTime: null,
},
{
auditTime: null,
browse: 4,
collect: 1,
content: '呵呵哈哈哈或',
contentFile: [{
fileType: 'jpg',
url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg'
},
],
createId: null,
createTime: "2022-04-21 15:49:59",
depict: "呢绒的合法还是进来快捷方式了哈哈哈 ",
enable: null,
id: "1517048004973060097",
isCollect: null,
label: null,
reason: null,
recommend: null,
state: null,
tagsCode: null,
title: "测试",
updateId: null,
updateTime: null,
}
], //搜索列表
}
},
方法体操作：methods
methods: {
searchClick(e) {
//searchList为从vuex穿过来的对话内容；
// searchValue为搜索框中的value
let searchValue = e
let searchList = []
// 遍历所有对话文本内容
for (let i = 0; i < this.searchList.length; i++) {
// 当对话内容中有包含搜索框中的字符串时
if (this.searchList[i].depict.indexOf(searchValue) >= 0) {
this.searchList[i].depict = this.searchList[i].depict.replaceAll(searchValue,
"<font style='color:red'>" + searchValue + "</font>") //替换所有搜索找到的关键字 更换颜色
searchList.push(this.searchList[i])
}
}
this.searchList = searchList
},
}智能推荐
graphviz安装遇到的bug及解决方法(成功跑通分类树并画图！)_钧桐的博客-程序员宅基地
今天一定要和大家分享以下graphviz！！！为什么选择它！遇到的bug我们直接使用pip install可以使用嘛？所以，我们一定要先下载graphviz并配置到系统变量配置完后仍然报错：如果我们通过指令查看是否安装成功重启成功跑通分类树并画图代码如下为什么选择它！它很好，它很棒，它画的图很好！遇到的bug我们直接使用pip install可以使用嘛？是不可以的，但是为什么好多包我们可以直接pip install之后就可以使用了呢？原因是我们使用的anaconda很厉害，它封装了这些包，我们在
2021-03-26_mysql 2021-03-26 00:00:00.0 和2021-03-26 的区别_励志成为大佬的小白的博客-程序员宅基地
文章目录前言一、大概流程图二、页面效果如下三、代码1.jsp页面2.controller层3、Mapper和Mapper.xml4、service层5、xml配置类6、导入相应的包7、一些注意点总结前言记录一下写的项目，梳理一下思路一、大概流程图二、页面效果如下三、代码1.jsp页面<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>
在java中允许用户自定义异常_在Java中允许用户自定义异常，但自定义异常类必须继承自Exception或其子类（）..._一片吃心的博客-程序员宅基地
中自定案大案媒文节测智慧众传0章化2课答树慕试答。允许用户义异异常案谈判题答复习商务。常承自系概学习论体论考答案导课通免费年毛国特最新泽东和中会主超星义理研辅考试思想色社。理学到沟答案通心智慧完整树知。尔雅学课答案年考治导超星研政课后。选修西中案人大学答案体解(江版)剖学公众知到号参考医药课答。但自定义学_案套答智慧药理课全树慕。全课案品安知到智慧后答树食。类必类案2答教程英语阅读商务。须继新微信...
预编译头文件(precompiled header)及VC编译程序时Cannot open precompiled header file: 'Debug/.pch': No such file or directory_xinew的博客-程序员宅基地
预编译头文件今天在改一个很大的程序，慢慢看，慢慢改。突然发现一个.c文件，里面什么也没有， 就几个头文件，我一看，我靠，这不是把简单的问题搞复杂了吗，随手删掉那个c文件。 结果不能编译了，我靠： fatal error C1083: Cannot open precompiled header file: /Debug/v13_3.pch/: No such file
界面设计方法(2) — 2.界面的布局_界面布局设计_李鸿君的博客-程序员宅基地
为了满足客户的需求，软件界面的表达形式千差万别。但与网站的界面形式（电子商务、政府政务、各类网站等）相比，作为企业管理（ERP）类系统的界面形式比较低调，由于需要长时间对着屏幕操作、观看、思考，因此要设计得比较沉稳、简洁，布局的规律性强，表达形式也不需要过于炫耀、跳跃、刺激。这里介绍几种最为常见和常用的PC端界面形式：卡片式、列表式、主细表式、树形式和页签式，以及这些界面形式对应的设计原则。这几种形式基本上可以满足大部分客户业务处理的需求，如有不同之处，本文中的设计原则也可以作为参考之用。
Android viewpager + 可缩放的imageview_viewpager+zoomimageview怎么一直放大_gf771115的博客-程序员宅基地
转自：http://www.cnblogs.com/liaolandemengxiang/p/4389558.htmlhttp://files.cnblogs.com/files/liaolandemengxiang/PhotoWallFallsDemo.rarhttp://files.cnblogs.com/files/liaolandemengxiang/ViewPager_i
随便推点
cocos creator + TypeScript 实现刮刮乐效果_cocos creator刮刮乐_对酒当歌﹏的博客-程序员宅基地
目录1、引言2、场景搭建3、代码部分4、效果展示5、Demo下载6、结束语1、引言 这里分享一个刮刮卡效果，闲言少叙，我们直接上代码。2、场景搭建 场景搭建如图所示：3、代码部分 详细代码如下所示：const {ccclass, property} = cc._decorator;@ccclassexport default class test extends cc...
Github 项目 - YOLOV3 的 TensorFlow 复现_AIHGF的博客-程序员宅基地
原文：Github 项目 - YOLOV3 的 TensorFlow 复现 - AIUAIGithub 项目 - tensorflow-yolov3作者：YunYang1994论文：yolov3最近 YunYang1994开源的基于 TensorFlow(TF-Slim) 复现的 YOLOv3 复现，并支持自定义数据集的训练.该开源项目组成：YOLO v3 网络结构权重转换We...
【已解决】Android studio中ADB启动失败，导致找不到虚拟机或真机_善水输出端的博客-程序员宅基地
adb server version (31) doesn't match this client (36); killing...error: could not install *smartsocket* listener: cannot bind to 127.0.0.1:5037:通常每个套接字地址(协议/网络地址/端口)只允许使用一次。 (10048)could not
Spring Model_郭嵩阳的博客-程序员宅基地
spring Model 构造要接收参数的值在springMVC中可以用Model对象来构造url的要获取的参数值方法一：@@RequestMapping("/modelcyTest")public String modelcyTest(Model model){ model.addAttribute("name","chaoying"); return "redirec
CNI插件之CNI插件最简实现之macvlan plugin_cni macvlan_codemillion的博客-程序员宅基地
CNICNICNI插件分类网络方案实现设计考量接口方法macvlan插件配置示例CNICNI(container network interface),是一个接口规范,这个规范定义了输入、输出的标准和调用的接口,只要调用CNI插件的实体遵守这个规范，就能从CNI拿到满足网络互通条件的网络参数(如IP地址、网关、路由、DNS等)，这些网络参数可以配置container实例。CNI接口支持的调用方法,比如添加网络，删除网络CNI插件的功能可以概括为:将容器加入网络,设置容器里面网络接口的ip,路由等信
sublime-markdown-extended_weixin_34162228的博客-程序员宅基地
为什么80%的码农都做不了架构师？>>> ...