vue.js の計算プロパティとは何ですか? (コード例)

#この記事では、具体的な例を通して Vue の計算プロパティについて紹介します。

計算プロパティとは何ですか?

計算プロパティは Vue のデータ プロパティのように見えますが、いくつかの算術演算やその他の演算を実行できます。 -算術タスク。

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <li>Full name : {{firstName + &#39; &#39;+ lastName}}</li>
  </ul>
</template>

<script>
 data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
 }
</script>

上記のコードでは、firstName と lastName という 2 つのデータ属性を作成し、テンプレートに挿入します。

テンプレートを見ると、{{}} 中括弧内にフルネーム ロジックが追加されています。

例

最初の計算プロパティを作成する方法の例。

計算プロパティは、計算プロパティ オブジェクトで宣言されます。

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <!-- 计算属性 -->
   <li>Full name : {{fullName}}</li>
  </ul>
</template>

<script>
export default{
     data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
  },
  computed:{
      fullName:function(){
          return this.firstName+&#39; &#39;+this.lastName
      }
  }
}

ここでは、fullName という計算プロパティを追加します。これは、ユーザーのフルネームを返す関数です。

計算されたプロパティは、データ プロパティと同様にテンプレートで使用できます。

計算されたプロパティは vue によってキャッシュされるため、基になるデータ プロパティが変更された場合にのみロジックが再評価されます。つまり、firstName または lastName が変更されていない場合は、関数を実行せずに以前に計算された結果のみが返されます。また。

関連する推奨事項: 「JavaScript チュートリアル 」

以上がvue.js の計算プロパティとは何ですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。