VUE3 開発入門: Vue.js を使用してデータ リストを動的にフィルタリングする

Vue.js は現代の Web 開発の主流になっています。これは、データ バインディングおよびコンポーネント化機能を提供する軽量の JavaScript フレームワークであり、開発者が対話型アプリケーションを簡単に構築できるようにします。そして今回、Vue.js の新しいバージョンである VUE3 もリリースされました。この記事では、VUE3 を使用して、Vue.js でデータリストの動的フィルタリングを実装する方法を例を通して紹介します。

1. 準備

このチュートリアルを開始する前に、Node.js と Vue の CLI ツールをインストールする必要があります。次のコマンドでバージョンを確認できます:

 node -v
 npm -v

現在、以前のバージョンの Node.js を使用している場合は、Node.js 公式 Web サイトから最新バージョンをダウンロードできます。インストールが完了したら、コマンド ラインで次のコマンドを使用して Vue CLI をインストールできます:

npm install -g @vue/cli

2. Vue.js プロジェクトを作成します

コマンド ラインでプロジェクトを入力しますディレクトリを作成し、次のコマンドを実行します。

vue create vue-demo
cd vue-demo

上記のコマンドを実行すると、対話型のコマンド ライン インターフェイスが表示され、プロジェクト構成をカスタマイズできるようになります。手動で構成するか、デフォルト構成を使用するかを選択できます。ご自身のニーズに合わせてお選びください。

3. データ リスト コンポーネントを構築する

デフォルトでは、Vue CLI は Hello World アプリケーションを生成します。データリストを表示するには、新しいコンポーネントを構築する必要があります。 src/components ディレクトリに新しいコンポーネント ファイル List.vue を作成し、コンポーネントに次のコードを追加します。

<template>
  <div>
    <input type="text" v-model="search">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange", "grape"],
      search: ""
    };
  },

  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  }
};
</script>

上記のコードでは、データを保存するコンポーネントに配列リストを定義します。と表示されます。独自のデータ ソースに置き換えることができます。次に、v-model を使用して、入力ボックスのデータをコンポーネントの検索属性にバインドします。計算属性では、検索属性に基づいてリスト配列内のデータをフィルター処理する計算属性 filteredList を定義します。

4. コンポーネントを使用する

App.vue ファイルで、コンポーネント List をインポートし、次の HTML をテンプレートに追加します:

<template>
  <div id="app">
    <List />
  </div>
</template>

<script>
import List from "./components/List.vue";

export default {
  components: {
    List
  }
};
</script>

上記のコードでは、まず、 List コンポーネントをインポートし、コンポーネント オプションでコンポーネントを宣言しました。テンプレートでは、List コンポーネントをページに追加しました。予想通り、ブラウザにアプリケーションが表示され、データ リストのフィルタリングにリアルタイムで応答する入力ボックスが表示されるはずです。

概要

この記事では、Vue.js と VUE3 を使用して動的データ リストを構築する方法を説明します。この例を通じて、Vue の双方向データ バインディング機能と計算されたプロパティを使用してデータをフィルターする方法を学びました。この例は比較的単純ですが、Vue.js をマスターするための良い出発点となります。次のプロジェクトでは、このテンプレートを利用して、より複雑なアプリケーションを構築できます。

以上がVUE3 開発入門: Vue.js を使用してデータ リストを動的にフィルタリングするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。