Vue 实现模糊匹配、搜索关键字高亮

效果图：

实现：

<p v-for="item in machlist" :key="item.index">
    <span v-html="item.title"></span>
</p>

data() {
	return {
	    // //全部列表
	    searchList: [
	    {
	        id: 1,
	        title: "迪迦奥特曼",
	    },
	    {
	        id: 2,
	        title: "泰罗奥特曼",
	    },
	    {
	        id: 3,
	        title: "哥斯拉怪兽",
	    },
	    {
	        id: 4,
	        title: "我才是迪迦奥特曼",
	    },
	    {
	        id: 5,
	        title: "我才是泰罗奥特曼",
	    },
	    {
	        id: 6,
	        title: "我才是哥斯拉怪兽",
	    },
	    {
	        id: 7,
	        title: "迪迦迪迦迪迦迪迦",
	    },
	    ], //全部列表
	    machlist: [], // 匹配列表
	    searchVal: "", //搜索框输入的值
	};
},
methods: {
    // 模糊查询 + 高亮匹配
    getMatchName() {
      // 模糊查询
      let resultList = [];
      this.searchList.forEach((item) => {
        if (item.title.indexOf(this.searchVal) > -1) {
          resultList.push(item);
        }
      });

      //修改高亮文案
      let dataList = [];
      resultList.forEach((item) => {
        const reg = new RegExp(this.searchVal, "ig");
        let obj = {
          id: item.id,
          title: item.title.replace(reg, (val) => `<span style='color:red'>${val}</span>`),
        };
        dataList.push(obj);
      });

      this.machlist = dataList;
    },
},