1. 計算入門
//基本的な使用方法 {{msg}} <input v-model="名前" /> //計算されたプロパティ:{ メッセージ:関数(){ this.name を返す } } 入力ボックスでは、 注意: 1.1、get と set の使用方法<input v-model="full"><br> <input v-model="first" > <br> <input v-model="second" > データ(){ 戻る { 第一に、「美しさ」 2番目:「シスター」 } }, 計算:{ 満杯: get(){ //現在のプロパティ値を読み取る必要があるときにコールバック関数が実行され、関連するデータに基づいて現在のプロパティの値が計算され、返されます。 return this.first + ' ' + this.second }, set(val){ //現在の属性値の変更を監視し、属性値が変更されたときに実行し、関連する属性データを更新します。let names = val.split(' ') this.first = 名前[0] this.second = 名前[1] } } } get メソッド: set メソッド: 1.2. 計算された属性キャッシュメソッドを通じてデータを結合することによっても、この効果を実現できます。コードは次のとおりです。 <div> {{full() }} </div> データ(){ 戻る { 第一に、「美しさ」 2番目:「シスター」 } }, 方法:{ 満杯(){ this.first + ' ' + this.second を返す } }, ページ内では、データが複数回使用される場合があります。computed <div> 計算値: {{full}} {{full}} {{full}} {{full}} </div> <div> メソッドは値を計算します: {{fullt}} {{fullt}} {{fullt}} {{fullt}} </div> データ(){ 戻る { 第一に、「美しさ」 2番目:「シスター」 } }, 計算:{ フル:関数(){ console.log('計算済み') this.first + ' ' + this.second を返す } }, 方法:{ フルト(){ console.log('メソッド') this.first + ' ' + this.second を返す } } 実行結果は次のとおりです。 結果から、メソッドによって取得されたデータは、複数回使用された後に複数回再計算する必要があることが簡単にわかりますが、計算されたプロパティはそうではありません。代わりに、それらは応答依存関係に基づいてキャッシュされ、依存プロパティ値が変更された場合にのみ再計算されます。計算量が少ないため、パフォーマンスが向上します。 2. 時計の紹介
デモ1:シンプルなデータの監視 <input v-model="first" > <br> データ(){ 戻る { 第一に、「美しさ」 } }, 時計:{ 最初(新しい値、古い値){ console.log('newVal',newVal) // first の最新の値 console.log('oldVal',oldVal) // first の前の値} }, // 最初の値を変更すると、最新の値がすぐに印刷されます デモ2:監視オブジェクト オブジェクトを監視する場合は、ディープ モニタリングを使用する必要があります。 <input v-model="per.name"> データ(){ 戻る { あたり: 名前:'Qianqian', 年齢:'18' } } }, 時計:{ あたり: ハンドラ(古い値、新しい値){ コンソールログ('newVal',newVal) コンソールログ('oldVal',oldVal) }, 深い:真、 } },
デモ3:オブジェクトの単一のプロパティを監視する // 方法 1: オブジェクトのプロパティを直接参照する <input v-model="per.name"> データ(){ 戻る { あたり: 名前:'Qianqian', 年齢:'18' } } }, 時計:{ 'per.name':function(newVal,oldVal){ コンソールログ('newVal->',newVal) コンソールログ('oldVal->',oldVal) } }, 次のように、 // 方法2: 計算値を使用する <input v-model="per.name"> データ(){ 戻る { あたり: 名前:'Qianqian', 年齢:'18' } } }, 時計:{ パーネーム(){ console.log('名前が変更されました') } }, 計算:{ パーネーム:関数(){ this.per.name を返す } }, デモ4: 小道具:{ mm:文字列 }, //即時使用はしない 時計:{ mm(新しいV、古いV){ コンソールログ('newV',newV) コンソールログ('oldV',oldV) } } //即時使用 時計:{ ミリメートル:{ 即時:true、 ハンドラ(newV,oldV){ コンソールログ('newV',newV) コンソールログ('oldV',oldV) } }
3. 両者の違い3.1. 計算された
計算:{ //プロパティ値は関数です perName:function(){ this.per.name を返す }, //属性値は属性値フルです:{ 得る(){ }、 設定(値){ } } }, 3.2. 時計の場合
IV. 応用シナリオ数値計算が必要で、他のデータに依存する場合は、 非同期操作や、データの変更時にオーバーヘッドの高い操作を実行する必要がある場合は、 要約: Vue の 以下もご興味があるかもしれません:
|
<<: Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析
>>: 異なる列を持つテーブルのクエリ結果のSQLマージ操作
目次1: 単一マシンのパスワードフリーログイン構成1. 仮想マシンのホスト名を設定する2. 仮想マシ...
問題の説明最近、MySQL5.6.21サーバーがありました。アプリケーションがリリースされた後、同時...
ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...
[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...
CentOS にはデフォルトで MariaDB がインストールされていますが、これは MySQL の...
原則的にはwindow.print()メソッドを呼び出すことですが、このメソッドは現在のページ全体を...
目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...
css-vars-ポニーフィルCSS 変数を使用して Web ページのスキニングを実現すると、互換...
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...
コア資産管理プロジェクトでは、el-transfer にドラッグ アンド ドロップによる並べ替えと、...
目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...
この記事では主に、Vue + SpringBoot でページ分割されたリストデータを実装する方法を紹...
目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...
目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...
考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...