Vue でデータ クエリと検索を実装する方法

Vue でデータ クエリと検索を実装する方法

インターネットの発展とデータの爆発的な増加に伴い、データ クエリと検索はプロジェクトで一般的なニーズになりました。 。 Vue.js フレームワークでは、いくつかのテクニックとツールを使用して、データ クエリと検索機能を実装できます。この記事では、いくつかの一般的な方法を紹介し、具体的なコード例を示します。

1. 基本的なデータ クエリ

まず、フィルターを使用する基本的なデータ クエリ方法を紹介します。フィルタ filter は、配列をフィルタリングし、指定された条件に従って要件を満たすデータを除外できます。以下は基本的な使用例です。

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要查询的关键词">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['苹果', '香蕉', '橙子', '草莓'],
    };
  },
  computed: {
    filteredList() {
      return this.list.filter((item) =>
        item.includes(this.keyword)
      );
    },
  },
};
</script>

上記のコードでは、v-model ディレクティブを通じて入力キーワードをデータ内のキーワード属性にバインドします。次に、計算プロパティ filteredList を使用して、キーワードを含むデータ項目をフィルターで除外し、ページに表示します。

2. あいまい検索

場合によっては、あいまい検索、つまりキーワードの内容の一部に基づいたマッチングを実行する必要があります。 Vue.js では、正規表現を使用してあいまい検索を実装できます。以下に例を示します。

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要搜索的关键词">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: ['苹果', '香蕉', '橙子', '草莓'],
    };
  },
  computed: {
    filteredList() {
      const reg = new RegExp(this.keyword, 'i');
      return this.list.filter((item) =>
        reg.test(item)
      );
    },
  },
};
</script>

上記のコードでは、RegExp コンストラクターを使用して正規表現オブジェクトを作成します。このうち、i は大文字と小文字を区別しないことを意味します。次に、計算プロパティ filteredList を使用して、正規表現に基づいて一致するデータ項目を除外します。

3. 条件付きクエリ

キーワードだけではなく、いくつかの条件に基づいてクエリを実行する必要がある場合があります。 Vue.js では、計算プロパティと v-bind 命令を使用して条件付きクエリを実装できます。以下に例を示します。

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入要搜索的关键词">
    <select v-model="type">
      <option value="">全部</option>
      <option value="水果">水果</option>
      <option value="蔬菜">蔬菜</option>
    </select>
    <ul>
      <li v-for="item in filteredList">{{ item.name }}（{{ item.type }}）</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      type: '',
      list: [
        { name: '苹果', type: '水果' },
        { name: '香蕉', type: '水果' },
        { name: '橙子', type: '水果' },
        { name: '萝卜', type: '蔬菜' },
        { name: '土豆', type: '蔬菜' },
      ],
    };
  },
  computed: {
    filteredList() {
      let filtered = this.list;
      
      if (this.keyword) {
        filtered = filtered.filter((item) =>
          item.name.includes(this.keyword)
        );
      }
      
      if (this.type) {
        filtered = filtered.filter((item) =>
          item.type === this.type
        );
      }
      
      return filtered;
    },
  },
};
</script>

上記のコードでは、クエリのカテゴリを選択するためのドロップダウン ボックスを追加しました。入力されたキーワードと選択されたカテゴリに基づいて、計算されたプロパティ filteredList を通じて条件を満たすデータ項目がフィルタリングされます。

概要

この記事では、Vue.js フレームワークでデータ クエリと検索を実装する方法を紹介し、具体的なコード例を示します。上記の方法により、さまざまなクエリや検索ニーズに柔軟に対応できます。読者のお役に立てば幸いです。

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