如何使用 Vue+html 突出显示搜索查询

Question

在这里我的搜索正在工作，但我是一个新手，不知道如何使用 npm ......我正在使用 HTML 和 VueJS 来实现这一点，并成功创建了搜索过滤器，但无法实现高亮过滤器..一些线索是使用的 markjs.io 和其他一些自定义 vuejs 过滤器，但无法实现它们。

class Post {
  constructor(title, link, author, img, course, coursel, cours, coursl, cour, courl, cou, coul, co, col) {
    this.title = title;
    this.link = link;
    this.author = author;
    this.img = img;
    this.course = course;
    this.coursel = coursel;
    this.cours = cours;
    this.coursl = coursl;
    this.cour = cour;
    this.courl = courl;
    this.cou = cou;
    this.coul = coul;
    this.co = co;
    this.col = col;
  }
}
const app = new Vue({
  el: "#app",
  data: {
    search: "",
    postList: [
      new Post("abc", null, "xyz", "wqw", "qwe", "", " ", null, " ", null, " ", null, " ", null, );
    ]
  },
  computed: {
    filteredList() {
      return this.postList.filter(post => {
        return post.title.toLowerCase().includes(this.search.toLowerCase()) ||
          post.author.toLowerCase().includes(this.search.toLowerCase()) || 
          post.course.toLowerCase().includes(this.search.toLowerCase()) || 
          post.cours.toLowerCase().includes(this.search.toLowerCase()) || 
          post.cour.toLowerCase().includes(this.search.toLowerCase()) || 
          post.cou.toLowerCase().includes(this.search.toLowerCase()) || 
          post.co.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  }
});

这是我正在使用的 HTML 代码

<div id="app">
  <div class="search-wrapper">
    <input type="text" v-model="search" placeholder="Search"
      onfocus="if(this.value==this.defaultValue)this.value=''"    
      onblur="if(this.value=='')this.value=this.defaultValue" />
  </div>
  <div class="wrapper">
    <div class="col-lg-12 col-md-4 card" v-for="post in filteredList">
      <a v-bind:href="post.link" target="_blank">
        <img v-bind:src="post.img"/> 
        <div style="line-height:20%;">
          <br>
        </div>
        <font size="2">{{ post.author }}</font>
        <div class="brmedium"></div>
        <font size="5"><b><i><em>{{ post.title }}</em></i></b></font>
      <a v-bind:href="post.coursel" title="View Credential" target="_blank"><font size="3">{{ post.course }}</font></a>
      <a v-bind:href="post.coursl" title="View Credential" target="_blank"><font size="3">{{ post.cours }}</font></a>
      <a v-bind:href="post.courl" title="View Credential" target="_blank"><font size="3">{{ post.cour }}</font></a>
      <a v-bind:href="post.coul" title="View Credential" target="_blank"><font size="3">{{ post.cou }}</font></a>
      <a v-bind:href="post.col" title="View Credential" target="_blank"><font size="3">{{ post.co }}</font></a>
      </a>
    </div>
  </div>
</div>

Answer 1

<template>
  <div>
    <input v-model="text" @input="input" />
    <p id="x">
      Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et
    </p>
  </div>
</template>

<script>
/*eslint-disable */
export default {
  data() {
    return {
      t: String(""),
      text: String(""),
    };
  },
  mounted() {
    this.t = document.querySelector("#x").innerText;
  },
  methods: {
    input() {
      document.querySelector("#x").innerHTML = this.t.replaceAll(
        this.text,
        `<span class='h'>${this.text}</span>`
      );
    },
  },
};
</script>

<style>
.h {
  background: red;
}
</style>

简单的高亮搜索这可能会对您有所帮助