vue 高亮搜索

最新推荐文章于 2024-10-10 13:13:22 发布

君子坦荡荡,小人长戚戚

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量249

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67022380/article/details/125643703

版权

这篇博客介绍了如何在Vue.js应用中实现搜索关键词高亮显示的功能，适用于前端开发，特别是对于使用JavaScript和Vue.js框架的开发者。内容简洁，旨在帮助开发者提升用户体验。

摘要由CSDN通过智能技术生成

如果有需要希望能帮助你们, 也希望大佬们能优化一下

<template>
  <div>
    <div><input v-model="value" style="width:188px;" placeholder="关键字" /></div>
    <hr>
    <div>
      <div v-for="(item,key) in filter_content(content,'title',value)" :key="key" v-html="item.title"></div>
    </div>
    <hr>
    <div>
      <div v-html="clone_content(text,value)"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      text: '巴拉巴拉巴拉1234',
      content: [
        { title: '都是这样的把' },
        { title: '标题11' },
        { title: '标题1' },
        { title: '标题2' },
        { title: '标题3' }
      ]
    };
  },
  computed: {
    // 改变数组并高亮
    // arr: 数组
    // type: 要筛选的键
    // value: 要搜的内容
    filter_content: function () {
      return (arr, type, value) => {
        let res = JSON.parse(JSON.stringify(arr));
        res = [...res.filter(v => v[type].includes(value)).sort((a, b) => a[type].toString().length < b[type].toString().length), ...res.filter(v => !v[type].includes(value))];
        res = res.map((item) => {
          if (value !== '' && item[type].toString().includes(value)) {
            item[type] = item[type].replace(value, `<span style="color:#0f0;">${value}</span>`);
            return item;
          } else {
            return item;
          }
        });
        return res;
      };
    },
    // 文字高亮
    // str: 字符串
    // value: 要搜的内容
    clone_content: function () {
      return (str, value) => {
        if (str.toString().includes(value) && value !== '') {
          return str.replace(value, `<span style="color:#0f0;">${value}</span>`);
        }
        return str;
      };
    }
  }
};
</script>