vueファジークエリキーワードプラスカラー-フロントエンドQ&A-php.cn

vueファジークエリキーワードプラスカラー

WBOY

リリース： 2023-05-27 17:43:39

オリジナル

754 人が閲覧しました

Vue は非常に人気のある JavaScript フレームワークであり、その重要な機能の 1 つは、開発者がインタラクティブで動的な Web アプリケーションを簡単に構築できるようにすることです。 Vue のファジークエリ機能を使用すると、検索が非常に便利になり、開発者がユーザーエクスペリエンスを向上させるのにも役立ちます。この記事では主にVueのファジークエリでキーワードに色を付ける実装方法を紹介します。

ファジークエリとは、データセット内に特定の条件（テキスト、数値、日付など）を入力することで、条件に一致するデータを検索できることを意味します。 Vue では、v-model を使用して入力ボックスをバインドし、計算された属性を検索できます。具体的な実装は次のとおりです。

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

ログイン後にコピー

上記のコードでは、最初に入力ボックスをバインドし、次に v-for 命令の計算属性を通じてデータをフィルター処理して、キーワードに一致するデータを除外します。。次に、正規表現を使用してキーワードを HTML タグで囲み、スタイルを追加するハイライトメソッドを定義しました。最後に、定義されたスタイルシートで、ハイライトクラスの色を設定します。

XSS 脆弱性を防ぐために、HTML タグのレンダリングには Vue の v-html ディレクティブまたは DOMPurify ライブラリを使用する必要があることに注意してください。

要約すると、Vue のファジークエリ機能は非常に便利で、検索が非常に柔軟になり、キーワードとカラー機能によりユーザーエクスペリエンスがさらに向上します。実装方法も比較的簡単で、ハイライトメソッドを定義するだけです。開発者は、ニーズに応じて変更や最適化を行うことができます。

以上がvueファジークエリキーワードプラスカラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。