这次在项目中遇到了一个要做一个搜索功能，因为项目是vue的，而且是在手机端，所以对这个搜索功能的实现和能做到什么样子都没有底，在网上研究了一会，发现大家的解决方法都各有特色，有引入第三方包的，有遍历的，确实都可以实现，但我觉得在vue中这样的方法也太过繁琐了，于是经过一段时间的查询与思索后我自己写了个简单的方法，并记录下自己思索的过程
第一步
明确寻求 产品的一万种奇怪要求
对于开发来说，应该要知道自己需要什么，不需要什么，理解pm的需求，把功能以最符合ue的样子呈现出来，而这次的功能需求是非常简单明了的，一个搜索框，底下是文章，搜索框输入的时候动态标红，按下回车会跳到标红的位置，简单明了
第二步
寻找灵感 百度救我
对于已经有过开发经验的人来说，可能把自己以前的代码拿去复用就可以解决问题，但对于我这种第一次开发的菜鸡来说，对搜索功能的实现竟然毫无头绪，这种在身边随处可见的功能，竟然没有细想过具体的实现流程，幸好，现代人的视野就是搜索引擎的视野，去百度上转了一圈之后，见到了各种各样的方法，但他们都有一个共同点，太复杂了，复杂到我看到就有点不太想用，虽然我是那种虽然代码能成功运行就等于没问题的三流选手，但是看到太过复杂的代码也很影响我一天的心情，所以我选择了更为简单的方法
第三步
进入开发 bug的无数种奇怪炼成方式
首先我的代码结构如下：
<template>
<div>
<div class="header"> //页面头部，搜索框部分
<div class="search-total">
<div class="search_model_zt">
<div class="search">
<div class="search_icon"><img :src="require('img/search.png')" /></div>
<div class="search_input"><input v-model="searchitem" @keyup.enter="submit" placeholder="搜索条文" /></div>
</div>
</div>
</div>
</div>
<div class="law-content"> //页面内容部分，具体内容由后端传入的datelist中的lawContent提供
<div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div>
</div>
</div>
</template>搜索内容把对应内容变为红色的函数就是changeColor
changeColor(item) {
let searchitem = this.searchitem; //获取动态变化的搜索词
if (searchitem !== '') { //若搜索词不为空，对搜索词进行替换
