Vue-Fuzzy-Query-Schlüsselwort plus Farbe

Vue ist ein sehr beliebtes JavaScript-Framework und eine seiner wichtigen Funktionen besteht darin, Entwicklern die einfache Erstellung interaktiver und dynamischer Webanwendungen zu ermöglichen. Die Fuzzy-Abfragefunktion von Vue macht die Suche sehr komfortabel und kann Entwicklern auch dabei helfen, die Benutzererfahrung zu verbessern. In diesem Artikel wird hauptsächlich die Implementierungsmethode zum Hinzufügen von Farbe zu Schlüsselwörtern in der Vue-Fuzzy-Abfrage vorgestellt.

Fuzzy-Abfrage bedeutet, dass in einem Datensatz durch Eingabe bestimmter Bedingungen (z. B. Text, Zahlen, Daten usw.) nach den Daten gesucht werden kann, die den Bedingungen entsprechen. In Vue können wir das V-Modell verwenden, um ein Eingabefeld zu binden und dann das berechnete Attribut zu durchsuchen. Die spezifische Implementierung lautet wie folgt:

<template>
  <div>
    <input type="text" v-model="keyword"/>
    <ul>
      <li v-for="item in filteredData">{{ highlight(item) }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {id: 1, name: 'Apple'},
        {id: 2, name: 'Banana'},
        {id: 3, name: 'Orange'},
        {id: 4, name: 'Watermelon'},
        {id: 5, name: 'Grape'},
      ],
      keyword: ''
    }
  },
  computed: {
    filteredData () {
      return this.data.filter(item => item.name.toLowerCase().includes(this.keyword.toLowerCase()))
    }
  },
  methods: {
    highlight (item) {
      const regex = new RegExp(this.keyword, 'gi')
      return item.name.replace(regex, `<span class="highlight">${this.keyword}</span>`)
    }
  }
}
</script>

<style>
.highlight {
  color: red;
}
</style>

Im obigen Code binden wir zunächst ein Eingabefeld und filtern dann die Daten über das berechnete Attribut in der V-For-Anweisung, um die übereinstimmenden Daten herauszufiltern das Schlüsselwort. Als Nächstes haben wir eine Hervorhebungsmethode definiert, die reguläre Ausdrücke verwendet, um Schlüsselwörter in HTML-Tags zu verpacken und Stile hinzuzufügen. Abschließend legen wir im definierten Stylesheet die Farbe für die Highlight-Klasse fest.

Es ist zu beachten, dass Sie zur Vermeidung von XSS-Schwachstellen die v-html-Direktive von Vue oder die DOMPurify-Bibliothek zum Rendern von HTML-Tags verwenden sollten.

Zusammenfassend lässt sich sagen, dass die Fuzzy-Abfragefunktion von Vue sehr praktisch ist, die Suche sehr flexibel macht und die Schlüsselwort- und Farbfunktion das Benutzererlebnis weiter verbessern kann. Auch die Implementierungsmethode ist relativ einfach, Sie müssen lediglich eine Hervorhebungsmethode definieren. Entwickler können je nach Bedarf Änderungen und Optimierungen vornehmen.

Das obige ist der detaillierte Inhalt vonVue-Fuzzy-Query-Schlüsselwort plus Farbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!