Vueで検索機能を実装する方法

フロントエンド機能の実装プロセスでは、検索機能が一般的な要件となります。人気のあるフロントエンド フレームワークとして、Vue は検索機能の実装も適切にサポートできます。この記事では、Vue で検索機能を実装する方法と具体的なコード例を紹介します。

1. 準備

検索機能を実装する前に、データ ソース、つまり検索する必要のあるデータを準備する必要があります。この記事の例では、書籍情報を含む配列を次の形式でデータ ソースとして使用します:

books: [ { id: 1, title: 'Vue.js实战', author: '梁灏', publisher: '人民邮电出版社' }, { id: 2, title: 'JavaScript高级程序设计', author: 'Nicholas C.Zakas', publisher: '人民邮电出版社' }, { id: 3, title: '深入浅出Node.js', author: '朴灵', publisher: '人民邮电出版社' }, // 更多书籍信息... ]

データ ソースの準備に加えて、入力要素を Vue に追加する必要もあります。ユーザー入力を受け取ります。

その中で、v-modelディレクティブは、Vue で双方向のデータ バインディングを実装する方法であり、ユーザーが input 要素に入力した値と ## を組み合わせます。 Vue インスタンスの #keywordデータの同期更新を実現するために属性をバインドします。

computedを提供します。computedを使用して検索機能を実装できます。

filteredBooksを定義して、検索後の結果を保存できます。

computed: { filteredBooks() { return this.books.filter((book) => { return book.title.indexOf(this.keyword) !== -1 || book.author.indexOf(this.keyword) !== -1 || book.publisher.indexOf(this.keyword) !== -1; }) } }

this.keywordと各書籍のタイトル、著者、出版社を比較し、一致した場合は、対応する書籍が返されます。情報。ここでは配列のfilter()メソッドが使用されており、条件を満たすすべての要素を含む新しい配列を返します。

v-for命令を使用して、filteredBooks配列内の各要素をループします。

 
 {{ book.title }} - {{ book.author }} - {{ book.publisher }} 
 

v-for命令は、filteredBooks配列内の各要素を li 要素としてレンダリングし、一意のキー値をバインドします。ここでは、各要素の一意性を確保するために、各書籍のidをキー値として使用します。

watchという属性も提供します。データ変更時の操作。watch属性を使用して検索機能を実装することもできます。

searchResultを定義して、keyword属性が変更されたときに検索結果を更新できます。

watch: { keyword() { this.searchResult = this.books.filter((book) => { return book.title.indexOf(this.keyword) !== -1 || book.author.indexOf(this.keyword) !== -1 || book.publisher.indexOf(this.keyword) !== -1; }) } }

keyword属性が変更されると、watch 属性の関数がトリガーされます。新しい検索結果をsearchResult属性に保存し、v-forディレクティブを使用してページをループして検索結果を表示します。

 
 {{ book.title }} - {{ book.author }} - {{ book.publisher }} 
 

以上がVueで検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。