vue 搜索关键字并实现高亮功能_vue 搜索关键字高亮-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45818290/article/details/126483150

这篇博客介绍了如何在Vue.js应用中实现搜索关键字高亮。通过将输入框的搜索内容传递给后端，调用接口获取搜索结果，再对结果显示列表中的关键字进行替换以实现高亮显示。文章包括搜索框、搜索列表的代码展示和JavaScript部分的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搜索关键字并让关键字高亮，主要是将input搜索框绑定数据，然后传给后端，调用接口获得搜索到的列表，然后将得到的列表中的关键字做一个替换

效果图：

搜索框部分代码：

<div class="search">
    <div class="search-input">
        <el-input placeholder="" v-model="sinput" @change="search" clearable/>
    </div>
    <div class="search-button">
        <el-button @queryTable="getList">查询</el-button>
    </div>
</div>

搜索列表部分

<el-col>
    <div>
        搜索结果
    </div>
    <el-form 
        :model="queryParams" 
        v-for="(item,index) in form" 
        :key="index"
        ref="form" 
        :inline="true" 
        v-show="showSearch" 
        label-width="100px"
    >
        <div>
            <div>
                <span v-html="brightenKeyword(item.title, sinput)"></span>
            </div>
            <div>
                <span v-html="brightenKeyword(item.content, sinput)"></span>
            </div> 
        </div>         
    </el-form>
</el-col>

js部分代码：

data: {
    return {
        sinput: '',
        form: {}
    }
},
method:{
    search() {
        if(this.sinput == '') {
            this.showSearch = false
          }else{
            this.showSearch = true
            //此处将输入搜索框的数据赋值给传给接口的参数 
            this.queryParams.likeTitleOrContent = this.sinput;
            //此处为调用接口数据 将得到的数据列表赋值给form
            listOperatingInstructions(this.queryParams).then(response => {
              this.form = response.rows;
              this.loading = false;
            }
            );
          }
    },
}