vueでcomputedの属性を設定する方法

Vue では、computed はプロパティを計算することで新しいプロパティ値を導出できる非常に強力な機能です。ほとんどの場合、計算プロパティは、値を変更するのではなく、値を計算するために使用されます。ただし、一部の特殊なケースでは、計算されたプロパティを新しい値に設定する必要がある場合があります。では、Vue では、計算されたプロパティをどのように設定できるのでしょうか?次に、この記事ではそれらに 1 つずつ答えていきます。

1. 計算属性の基本的な使用法

まず、計算属性の基本的な使用法を見てみましょう。計算された属性は、実際には get メソッドと set メソッドを持つ属性です。このうち、get メソッドは属性の値を計算するために使用され、set メソッドは属性の値を設定するために使用されます。以下に例を示します。

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(newValue) {
      var names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

上記のコードでは、計算プロパティ fullName を定義します。その値は、firstName と lastName の組み合わせです。 get メソッドでは、firstName と lastName を連結して fullName の値を計算します。 set メソッドでは、新しい fullName 値を firstName と lastName に分割し、それらの値を同時に設定することで、元の属性値を変更します。

2. 計算属性の set メソッドの注意点

計算属性の set メソッドは便利そうですが、注意すべき点もいくつかあります。より重要な点は次のとおりです。

1. 計算された属性は基本的に読み取り専用であるため、属性を設定するときは、設定した値が他の場所に影響を与えないことを確認する必要があります。
2. 計算された属性自体には値が保存されないため、属性を設定するときは、次回取得するときに設定値が正しいことを確認する必要があります。

3. 実際のアプリケーション例

以下では、実際のアプリケーション例を使用して、計算属性を設定する方法を示します。

まず、計算属性 totalPrice を持つコンポーネントを定義します。その値は、製品価格に製品数量を乗算したものです (totalPrice = 価格 * 数量)。次のコードを使用して、この計算プロパティを実装できます。

<template>
  <div>
    <p>单价：{{ price }}</p>
    <p>数量：<input></p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        quantity: 2
      }
    },
    computed: {
      totalPrice: {
        get() {
          return this.price * this.quantity
        },
        set(newValue) {
          this.quantity = newValue / this.price
        }
      }
    }
  }
</script>

上記のコードでは、最初に計算プロパティ totalPrice を含むコンポーネントを定義します。 get メソッドでは、価格と数量を使用して合計値を計算し、set メソッドでは、newValue と価格を使用して新しい数量値を計算し、データを更新して DOM を更新します。

ここで、数量や価格ではなく合計価格を設定したい場合は、次のようにすることができます:

this.totalPrice = 20;

これにより、合計価格が次のように数量の値が自動的に変更されます。 20に等しい。合計価格の設定時に数量を自動的に割り当てるのではなく、単価に数量を掛けた値を合計価格と等しくしたい場合は、set メソッドのロジックを次のように変更できます。このように、合計価格を設定して単価の値を変更できます。

一般に、計算属性は確かに非常に強力な機能ですが、注意する必要があることがたくさんあります。実際に使用する場合は、無用な問題を避けるために、状況に応じて計算属性の設定メソッドを慎重に使用する必要があります。

以上がvueでcomputedの属性を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。