この記事では、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> 知らせ:
計算プロパティのゲッターとセッター計算プロパティは通常、データを取得する(データの変更に応じて変更する)ために使用されるため、デフォルトではゲッターしかありませんが、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLデュアルマシンホットスタンバイと負荷分散の実装手順の詳細説明
>>: Jmeterはデータベースプロセスダイアグラムに接続します
この記事の例では、参考までに簡単な計算機を実装するためのjsの具体的なコードを共有しています。具体的...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...
<br />関連記事: Web コンテンツ ページ作成のための 9 つの実用的なヒント、...
ネットワークリクエストを送信すると、次の保存情報が表示されます。おめでとうございます。ドメインを越え...
Docker を初めて使用する場合は、コンテナの管理を始めるために習得する必要がある基本的なコマン...
RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...
序文今日、開発者から、コンテナ サービスを停止、rm (docker rm -f)、または強制終了で...
この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考まで...
ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...
<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...
脆弱性の詳細VSFTP は、GPL に基づいてリリースされた Unix ライクなシステムで使用される...
停止したすべてのDockerコンテナを1つのコマンドで再起動するdocker ps -a | gre...
コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...
目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....