Vue 計算プロパティ実装トランスクリプト

この記事では、Vueの計算プロパティ実装レポートカードを参考に共有します。具体的な内容は次のとおりです。

コードは次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>トランスクリプト統計</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <スタイル タイプ="text/css">
   .グリッドテーブル{
    フォントファミリー:verdana、arial、sans-serif;
    フォントサイズ:11px;
    色:#333333;
    境界線の幅: 1px;
    境界線の色:#666666;
    境界線の折りたたみ: 折りたたみ;
   }
   .gridtable th{
    境界線の幅: 1px;
    パディング:8px;
    境界線スタイル:solid;
    境界線の色:#666666;
    背景色: #dedede;
   }
   .gridtable td{
    境界線の幅: 1px;
    パディング:8px;
    境界線スタイル:solid;
    境界線の色:#666666;
    背景色: #ffffff;
   }
  </スタイル>
 </head>
 <本文>
  
  <div id="アプリ">
   <テーブルクラス="gridtable">
    <tr>
     <th>件名</th>
     <th>スコア</th>
    </tr>
    <tr>
     <td>言語</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="中国語" />
     </td>
    </tr>
    <tr>
     <td>数学</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="数学" />
     </td>
    </tr>
    <tr>
     <td>英語</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="英語" />
     </td>
    </tr>
    <tr>
     <td>合計スコア</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="sum" />
     </td>
    </tr>
    <tr>
     <td>平均スコア</td>
     <td>
      <input type="text" name="" id="" value="" v-model.number="平均" />
     </td>
    </tr>
   </テーブル>
  </div>
  
  <スクリプト>
   var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
     英語:100,
     数学：100、
     英語:60
    },
    計算:{
     合計:関数(){
      this.Chinese+this.Math+this.English を返します。
     },
     平均:関数(){
      Math.round(this.sum/3) を返します。
     }
    },
    
   })
  </スクリプト>
 </本文>
</html>

中国語、数学、英語のスコアを変更すると、合計スコアと平均スコアがリアルタイムで変化します。これが Vue の計算プロパティの特徴です。

Vue 計算プロパティパラメータの受け渡し

計算プロパティは本質的にはメソッドですが、通常は () なしでプロパティとして使用されます。ただし、実際の開発では、計算属性内のメソッドにパラメータを渡す必要がある場合は、クロージャパラメータ渡し方式を使用する必要があります。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>評価</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <div id="アプリ">
   {{追加(2)}}
  </div>
  
  <script type="text/javascript">
   var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
     番号:1
    },
    計算:{
     追加（）{
      関数(インデックス)を返す{
       this.number+index を返します。
      }
     }
    }
   })
  </スクリプト>
 </head>
 <本文>
 </本文>
</html>

知らせ：

計算プロパティ自体は、メソッドのように括弧内にパラメータを入力してパラメータを渡す目的を達成することはできません。パラメータを受け入れるには、メソッド本体に実際のメソッドを記述する必要があります。
同様に、計算属性メソッドの本体パラメータも省略できます。つまり、この例では、add(){} と add(index){} の両方が許容されます。

計算プロパティのゲッターとセッター

計算プロパティは通常、データを取得する（データの変更に応じて変更する）ために使用されるため、デフォルトではゲッターしかありませんが、Vue.js では必要に応じてセッター関数も提供されます。 set メソッドと get メソッドの順序は互いに独立しており、set メソッドが受け入れるパラメータは get メソッドの戻り値になります。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <title>計算済み</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <本文>
  
  <div id="アプリ">
   firstName:<input type="text" name="" id="" value="" v-model="first"/>
   lastName:<input type="text" name="" id="" value="" v-model="last"/>
   <p>fullName:<input type="text" name="" id="" value="" v-model="fullName"/></p>
  </div>
  <script type="text/javascript">
   var vm = 新しい Vue({
    el:"#アプリ",
    データ：{
     最初：「ジャック」、
     最後：「ジョーンズ」
    },
    計算:{
     フルネーム：
      取得:関数(){
       this.first+" "+this.last を返す
      },
      set:function(パラメータ){
       var names = パラメータ.split(" ")
       this.first = 名前[0]
       this.last = 名前[名前.長さ-1]
      }
     }
    }
   })
  </スクリプト>
 </本文>
</html>

計算プロパティと計算メソッドの違い

計算プロパティを使用するこのアプローチにより、必要な場合にのみコードが実行され、リソースを大量に消費する可能性のある作業の処理に適しています。ただし、プロジェクトにキャッシュ機能がない場合は、実際の状況に応じて方法を使用する必要があります。

計算プロパティの特性は次のとおりです。

①計算プロパティの依存関係が変化すると、即時に計算が実行され、計算結果が自動的に更新されます。
②計算されたプロパティの評価結果は次回直接使用できるようにキャッシュされます。
③計算プロパティは、より複雑な式を実行するのに適していますが、多くの場合、長すぎたり、頻繁に繰り返す必要があるため、テンプレートで直接使用することはできません。
④計算プロパティは、データオブジェクトの拡張および強化されたバージョンです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: