vue mot-clé de requête floue plus couleur

Vue est un framework JavaScript très populaire, et l'une de ses fonctions importantes est de permettre aux développeurs de créer facilement des applications Web interactives et dynamiques. La fonction de requête floue de Vue rend la recherche très pratique et peut également aider les développeurs à améliorer l'expérience utilisateur. Cet article présentera principalement la méthode d'implémentation consistant à ajouter de la couleur aux mots-clés dans la requête floue Vue.

Une requête floue signifie que dans un ensemble de données, en saisissant certaines conditions (telles que du texte, des chiffres, des dates, etc.), les données qui correspondent aux conditions peuvent être recherchées. Dans Vue, nous pouvons utiliser v-model pour lier une zone de saisie, puis rechercher dans l'attribut calculé. L'implémentation spécifique est la suivante :

<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>

Dans le code ci-dessus, nous lions d'abord une zone de saisie, puis filtrons les données via l'attribut calculé dans l'instruction v-for pour filtrer les données qui correspondent le mot clé. Ensuite, nous avons défini une méthode de surbrillance, utilisant des expressions régulières pour envelopper les mots-clés dans des balises HTML et ajouter des styles. Enfin, dans la feuille de style définie, nous définissons la couleur de la classe de surbrillance.

Il convient de noter que afin d'éviter les vulnérabilités XSS, vous devez utiliser la directive v-html de Vue ou la bibliothèque DOMPurify pour restituer les balises HTML.

En résumé, la fonction de requête floue de Vue est très pratique, rendant la recherche très flexible, et la fonction de mot-clé et de couleur peut encore améliorer l'expérience utilisateur. La méthode de mise en œuvre est également relativement simple, il suffit de définir une méthode de mise en évidence. Les développeurs peuvent apporter des modifications et des optimisations en fonction de leurs besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!