UNI-APPでは、コンピューターのプロパティを使用して、コンポーネント内の他のデータから派生したプロパティを作成します。計算されたプロパティを使用するには、コンポーネントオプションのcomputed
フィールド内でそれらを定義する必要があります。これがあなたがそれを行う方法です:
computed
フィールド内で、計算された値を返す関数を定義します。この関数には引数がないはずです。これは、UNI-APPコンポーネントで計算されたプロパティを使用するための基本構造です。
<code class="javascript">export default { data() { return { // Your data properties here firstName: 'John', lastName: 'Doe' }; }, computed: { fullName() { return this.firstName ' ' this.lastName; } } }</code>
この例では、 fullName
firstName
とlastName
に依存する計算されたプロパティです。 firstName
またはlastName
が変更されるたびに、 fullName
自動的に更新されます。
UNI-APP開発で計算されたプロパティを使用すると、いくつかの利点があります。
ショッピングカートにアイテムの合計価格を表示する必要があるUNI-APPプロジェクトに取り組んでいるとしましょう。計算されたプロパティを実装して合計価格を計算する方法の例を次に示します。
<code class="javascript">export default { data() { return { cartItems: [ { name: 'Item 1', price: 10, quantity: 2 }, { name: 'Item 2', price: 15, quantity: 1 } ] }; }, computed: { totalPrice() { return this.cartItems.reduce((total, item) => { return total (item.price * item.quantity); }, 0); } }, template: ` <view> <text>Total Price: {{ totalPrice }}</text> </view> ` }</code>
この例では、 totalPrice
、 cartItems
アレイを介して反復することにより、カート内のアイテムの合計価格を計算する計算されたプロパティです。 cartItems
が変更されるたびに、 totalPrice
自動的に更新され、新しい合計がテンプレートに反映されます。
UNI-APPの計算されたプロパティと通常のデータプロパティは、さまざまな目的に役立ち、いくつかの重要な違いがあります。
computed
フィールドで宣言され、データプロパティはdata
フィールドで宣言されます。要約すると、計算されたプロパティは、UNI-APPで派生データを管理し、反応性、読みやすさ、効率を向上させるための強力なツールであり、データプロパティは生データの保存に使用されます。
以上がUNI-APPで計算されたプロパティを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。