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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue の計算プロパティとプロパティリスニングについての簡単な説明
  • Vue の計算プロパティ
  • Vue の計算プロパティの紹介
  • Vueは計算プロパティを使用して動的スライダーの作成を完了します
  • Vue 監視プロパティと計算プロパティ
  • Vue の計算プロパティとデータ取得方法
  • Vue の計算プロパティをご存知ですか?
  • Vueの計算プロパティ名ケースの3つの実装方法

<<:  MySQLデュアルマシンホットスタンバイと負荷分散の実装手順の詳細説明

>>:  Jmeterはデータベースプロセスダイアグラムに接続します

推薦する

シンプルな計算機を実装するためのネイティブ js

この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...

マークアップ言語 - 簡略化されたタグ

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Linuxがすべてのコマンドをサポートしていない問題の解決策

Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...

ハイパーリンクのWebデザイン原則

<br />関連記事: Web コンテンツ ページ作成のための 9 つの実用的なヒント、...

Vue のクロスドメイン問題の処理と解決策の概要

ネットワークリクエストを送信すると、次の保存情報が表示されます。おめでとうございます。ドメインを越え...

Docker チュートリアル: コンテナの使用 (簡単な例)

Docker を初めて使用する場合は、コンテナの管理を始めるために習得する必要がある基本的なコマン...

TCP 3 回目のハンドシェイク データ転送プロセス図

RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...

Dockerがコンテナサービスを停止または削除できない問題の解決策

序文今日、開発者から、コンテナ サービスを停止、rm (docker rm -f)、または強制終了で...

JavaScriptは4桁のランダム検証コードの生成を実装します

この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考まで...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...

vsFTP 3.0.3 のコンパイルとインストールの詳細な分析

脆弱性の詳細VSFTP は、GPL に基づいてリリースされた Unix ライクなシステムで使用される...

停止したすべてのDockerコンテナを1つのコマンドで再起動する

停止したすべてのDockerコンテナを1つのコマンドで再起動するdocker ps -a | gre...

HTML割引価格計算の実装原理とスクリプトコード

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...

MySQLのジョイントクエリについて詳しく説明します

目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....