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マージ操作
まずは簡単なデータを見てみましょう。 Googleが発表したレポートによると、 ①中国の都市の97%...
仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...
<br />外交部などの中央政府機関、各レベルの地方政府、その他の国家機関や部門が率先し...
まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...
序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...
Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...
第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...
目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...
目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...
1. Nginx の紹介Nginxは負荷分散やリバースプロキシにも使えるWebサーバーです。現在最も...
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
World Wide Web Consortium (W3C) は、HTML 5 仕様のドラフトをリ...
nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...
コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...
私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...