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

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

王林

リリース： 2023-06-15 21:10:10

オリジナル

1139 人が閲覧しました

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 サイトの他の関連記事を参照してください。