vue の計算プロパティの詳細については、こちらをご覧ください。
次の Vue.js チュートリアル 列では、vue で計算されるプロパティについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
#1. 計算属性とは何ですか
テンプレート内の式は非常に便利ですが、元々は使用するために設計されています。 簡単な操作。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。例:
<p id="example">
{{ message.split('').reverse().join('') }}</p>ここの式には 3 つの操作が含まれていますが、これはあまり明確ではないため、複雑なロジックに遭遇した場合は、それを処理するために計算される Vue の特別な計算属性を使用する必要があります。
2. 計算属性の使用法
演算、関数呼び出しなどを含むさまざまな複雑なロジックを計算属性で完了できます。最終的なリターンは 1 つの結果で十分です。
計算されたプロパティを使用して上記の例を書き直してみましょう
<p id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了</p>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () { // `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});結果:
元のメッセージ: "Hello"
計算された反転メッセージ: "olleH "
上記の例の単純な使用法に加えて、計算されたプロパティは複数の Vue インスタンスのデータに依存することもできます。 データのいずれかが変更される限り、計算されたプロパティはが再実行されると、ビューも更新されます。
<body>
<p id="app">
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
</p></body>var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){ this.package1.count++
}
}
});計算プロパティについては、見落とされがちな非常に実用的なヒントが 2 つあります: まず、計算プロパティは他の計算プロパティに依存する可能性があります。第 2 に、計算プロパティは現在の Vue のデータのみに依存できるわけではありません。インスタンスだけでなく、他の インスタンス , のデータにも依存します。例:
<p id="app1"></p>
<p id="app2">{{ reverseText}}</p>var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
});var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join(''); //使用app1的数据进行计算 }
}
});各計算プロパティにはゲッターとセッターが含まれます。上記の 2 つの例は、デフォルトの使用法です。計算されたプロパティ。getter を使用して読み取るだけです。
必要に応じて、セッター関数を提供することもできます。通常のデータを変更するのと同じように、計算されたプロパティの値を手動で変更すると、セッター関数がトリガーされて、次のようなカスタム操作が実行されます。 :
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: { // getter
get: function () { return this.firstName + ' ' + this.lastName
}, // setter
set: function (newValue) { var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1];
}
}
}
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。ほとんどの場合、計算されたプロパティを読み取るためにデフォルトのゲッター メソッドのみを使用します。セッターはビジネスではほとんど使用されないため、計算されたプロパティを宣言するときは、デフォルトの書き込みメソッドを直接使用できます。 getter と setter の両方を宣言する必要はありません。
3. 計算属性キャッシュ
上記の例では、計算プロパティを使用することに加えて、式の中で次のようなメソッドを呼び出すことによっても同じ効果を実現できます。 :
<p>{{reverseTitle()}}</p>// 在组件中methods: {
reverseTitle: function () { return this.title.split('').reverse().join('')
}
}同じ関数を計算されたプロパティの代わりにメソッドとして定義することもでき、どちらの方法でも最終結果はまったく同じになります。 1 つだけが reverseTitle() を使用して値を取得し、もう 1 つが reverseTitle を使用して値を取得します。
ただし、計算されたプロパティは 依存関係に基づいてキャッシュされるという点が異なります。 計算されたプロパティは、関連する依存関係が変更された場合にのみ再評価されます。
これは、タイトルが変更されていない限り、reverseTitle 計算プロパティに複数回アクセスすると、関数を再度実行することなく、前の計算結果がすぐに返されることを意味します。
小さな例:
<p>{{reverseTitle}}</p>
<p>{{reverseTitle1()}}</p>
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p> computed: {
reverseTitle: function(){ return this.title.split('').reverse().join('') //而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
},
price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods: { //对象的方法
add: function(){ this.package1.count++
},
reverseTitle1: function(){ return this.title.split('').reverse().join('') //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
}
},常に再び機能します。
なぜキャッシュが必要なのでしょうか?巨大な配列を走査して多くの計算を行う必要がある、計算コストの高いプロパティA があるとします。その場合、A に依存する他の計算プロパティがある可能性があります。
キャッシュがない場合、必然的にA のゲッターを複数回実行することになります。キャッシュしたくない場合は、代わりにメソッドを使用してください。
関連する推奨事項:プログラミング関連の知識の詳細については、
プログラミング教育をご覧ください。 ！
以上がvue の計算プロパティの詳細については、こちらをご覧ください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7640
15
1391
52
90
11
32
150
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
VUEのボタンに関数を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。
vue.jsでJSファイルを参照する方法
Apr 07, 2025 pm 11:27 PM
vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。
VueでWatchの使用方法
Apr 07, 2025 pm 11:36 PM
Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。
Vue Multi-Page開発とはどういう意味ですか？
Apr 07, 2025 pm 11:57 PM
VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。
Vueによる前のページに戻る方法
Apr 07, 2025 pm 11:30 PM
vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。
VUEトラバーサルの使用方法
Apr 07, 2025 pm 11:48 PM
Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。
Vueにタグをジャンプする方法
Apr 08, 2025 am 09:24 AM
VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push（）メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。
