VUE3 クイック スタート: 計算された属性を使用してデータを計算する

VUE3 クイック スタート: 計算された属性を使用したデータの計算

VUE は、MVVM パターンに基づくフロントエンド フレームワークであり、世界で最も人気のあるフロントエンド フレームワークの 1 つに発展しました。 VUE3 は VUE の最新バージョンであり、開発者に優れたパフォーマンスと開発エクスペリエンスを提供します。 VUE3 では、計算プロパティは、データの値を簡単に計算し、データが更新されたときに自動的に更新できる非常に便利なツールです。

この記事では、計算されたプロパティ (計算済み) を使用してデータを計算する方法を紹介し、いくつかの実際的な使用例を示します。

1. 計算属性の概要

計算属性とは、テンプレートで使用される属性を指し、その値は計算によって取得されます。計算されたプロパティは通常、データのフィルター処理やデータの書式設定など、データをバインドする複雑な操作に使用されます。計算されたプロパティは反応的であり、依存するデータが変更されるとその値が自動的に更新されます。

2. 計算プロパティの使用

VUE3 では、計算プロパティは関数を定義することで実装されます。計算プロパティは、コンポーネントのプロパティでキーワード computed を使用して定義できます。以下は簡単な例です:

template:

<div>{{message}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe'
        };
    },
    computed: {
        message() {
            return `Hello, ${this.firstName} ${this.lastName}!`;
        }
    }
}

上の例では、計算された属性メッセージが定義されており、この属性の値は次のとおりです。スプライシングによって取得 firstName と lastName によって取得された文字列。

3. 計算プロパティの使用例

a. データのフィルタリング

計算プロパティは、データのフィルタリングに非常に適しています。以下は、フィルターを使用してデータをフィルター処理する例です。条件の特定の配列要素を満たすもの:

template:

<div v-for="item in filteredItems">{{item}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            items: ['apple', 'banana', 'orange'],
            filterKey: 'a'
        };
    },
    computed: {
        filteredItems() {
            return this.items.filter(item => item.indexOf(this.filterKey) > -1);
        }
    }
}

上記の例では、変数 items が定義されており、次に、計算された属性 filteredItems、値に filterKey が含まれる項目配列内の要素をフィルターで除外します。

b. データのフォーマット

計算されたプロパティは、データのフォーマットにも使用できます。以下は、計算されたプロパティを使用して日付を文字列にフォーマットする例です:

template :

<div>{{formattedDate}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            date: new Date()
        };
    },
    computed: {
        formattedDate() {
            return `${this.date.getFullYear()}-${(this.date.getMonth() + 1).toString().padStart(2,'0')}-${this.date.getDate().toString().padStart(2,'0')}`;
        }
    }
}

上記の例では、Date 型の変数 date を定義し、属性 formattedDate を計算して "yyyy-MM-dd" の文字にフォーマットします。弦。

4. 概要

計算プロパティは、データに対してさまざまな複雑な計算を実行できる、VUE3 の非常に便利なツールです。これを使用する場合は、依存データが変更されたときに計算された属性の値が自動的に更新されるように、データの依存関係に注意する必要があります。

以上がVUE3 クイック スタート: 計算された属性を使用してデータを計算するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。