纯前端搜索列表高亮，列表过滤出含有关键字的，并高亮

杨乐多00

已于 2024-01-05 10:23:11 修改

阅读量555

点赞数 9

分类专栏： vue 文章标签：前端 vue.js javascript css

于 2023-12-25 16:42:41 首次发布

本文链接：https://blog.csdn.net/weixin_59380960/article/details/135202945

版权

<el-input placeholder="请输入内容" size="small" v-model="searchTerm" class="input-with-select">
    <el-button slot="append" size="small" icon="el-icon-search"></el-button>
</el-input>

<ul>
    <li v-for="(item,index) in filteredList" :key="index">
          <div>
              <span v-html="highlightedText(item.name)"></span>
          </div>
    </li>                                
</ul>

<script>
export default {
  computed: {
   filteredList() {
     if(this.searchTerm) {
        let arr = []
        this.defaultList.forEach(item=>{
        // 不区分大小写，去除前后空格
          if(item.name.trim().toLowerCase().includes(this.searchTerm.trim().toLowerCase())){
              arr.push(item)