vue の計算プロパティを正しく使用する方法
今回は、vue 計算プロパティを正しく使用する方法と、vue 計算プロパティを正しく使用するための 注意事項 を説明します。実際のケースを見てみましょう。
1. 計算属性とは何ですか? テンプレート内の 式 は、もともと単純な操作用に設計されています。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。例:
<p id="example">
{{ message.split('').reverse().join('') }}
</p>ここの式には 3 つの操作が含まれていますが、これはあまり明確ではないため、複雑なロジックに遭遇した場合は、それを処理するために計算された Vue の特別な計算属性を使用する必要があります。
2. 計算属性の使用法
最終的に結果が返される限り、演算、関数呼び出しなどを含むさまざまな複雑なロジックを計算属性で完了できます。 計算された属性を使用して上記の例を書き直してみましょう
<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 インスタンスのデータを利用することもできます。データが変更されると、計算されたプロパティが再実行され、ビューが更新されます。計算プロパティについては、見落とされがちな非常に実用的なヒントが 2 つあります。1 つ目は、計算プロパティは他の計算プロパティに依存する可能性があることです。2 つ目は、計算プロパティは現在の 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++ } } });ログイン後にコピー
<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的数据进行计算
}
}
});) 各計算プロパティにはゲッターとセッターが含まれており、読み取りにはゲッターのみを使用する計算プロパティのデフォルトの使用法です。
必要に応じて、通常のデータを変更するのと同じように計算された属性の値を手動で変更する場合、setter 関数がトリガーされて、次のようなカスタム操作が実行されます。ほとんどの場合、計算されたプロパティを読み取るためにデフォルトの getter メソッドのみを使用します。ビジネスでは Setter が使用されることはほとんどないため、計算されたプロパティを宣言する場合は、 getter と setter の両方を宣言する必要がなく、デフォルトの書き込みメソッドを直接使用できます。
3. 計算された属性のキャッシュ
上の例では、計算された属性を使用することに加えて、次のような式でメソッドを呼び出すことによっても同じ効果を達成できます: 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 也会相应地被更新。
reverseTitle()小さな例:
<p>{{reverseTitle()}}</p>
// 在组件中
methods: {
reverseTitle: function () {
return this.title.split('').reverse().join('')
}
}対照的に、再レンダリングがトリガーされると、呼び出しメソッドは常に関数を再度実行します。
なぜキャッシュが必要なのでしょうか?巨大な配列を走査して多くの計算を行う必要がある、計算コストの高いプロパティ A があるとします。その場合、 A に依存する他の計算されたプロパティがある可能性があります。
キャッシュがない場合、必然的にAのgetterを複数回実行することになります！キャッシュしたくない場合は、代わりにメソッドを使用してください。
Vue 計算プロパティの使用法を見てみましょう
<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('') //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
}
},この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP に関する他の関連記事に注目してください。中国語のサイトです！ 推奨読書:
JS日時ピッカーの使い方の詳細な説明vue axiosリクエストのタイムアウト処理の詳細な説明(コード付き)
以上がvue の計算プロパティを正しく使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7345
15
1627
14
1352
46
1265
25
1214
29
CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハード ドライブ用の小型 HDD ベンチマーク ツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハード ドライブとソリッド ステート ドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスク パフォーマンス テスト ツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハード ドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテスト モードを提供し、ハードウェアのレビューで広く使用されています。
CUDA の汎用行列乗算: 入門から習熟まで!
Mar 25, 2024 pm 12:30 PM
General Matrix Multiplication (GEMM) は、多くのアプリケーションやアルゴリズムの重要な部分であり、コンピューター ハードウェアのパフォーマンスを評価するための重要な指標の 1 つでもあります。 GEMM の実装に関する徹底的な調査と最適化は、ハイ パフォーマンス コンピューティングとソフトウェア システムとハードウェア システムの関係をより深く理解するのに役立ちます。コンピューター サイエンスでは、GEMM を効果的に最適化すると、計算速度が向上し、リソースが節約されます。これは、コンピューター システムの全体的なパフォーマンスを向上させるために非常に重要です。 GEMM の動作原理と最適化方法を深く理解することは、最新のコンピューティング ハードウェアの可能性をより有効に活用し、さまざまな複雑なコンピューティング タスクに対してより効率的なソリューションを提供するのに役立ちます。 GEMMのパフォーマンスを最適化することで
Word文書で足し算、引き算、掛け算、割り算を計算する方法
Mar 19, 2024 pm 08:13 PM
WORD は強力なワード プロセッサです。Word を使用してさまざまなテキストを編集できます。Excel の表では、足し算、引き算、乗算の計算方法をマスターしました。そのため、Word の表で数値の足し算を計算する必要がある場合は、乗数を引くにはどうすればよいですか? 計算には電卓しか使用できませんか?答えはもちろん「いいえ」です。WORD でも実行できます。今日は、Word文書の表で加算、減算、乗算、除算などの基本的な演算を数式を使って計算する方法を説明しますので、一緒に学びましょう。そこで、今日は、WORD 文書で加算、減算、乗算、除算を計算する方法を詳しく説明します。ステップ 1: WORD を開き、ツールバーの [挿入] の下にある [表] をクリックし、ドロップダウン メニューに表を挿入します。
foobar2000のダウンロード方法は？ -foobar2000の使い方
Mar 18, 2024 am 10:58 AM
foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください
Baidu Netdisk アプリの使用方法
Mar 27, 2024 pm 06:46 PM
クラウド ストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウド ストレージ サービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストール まず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタム インストール オプションを選択してください。
NetEase メールボックス マスターの使用方法
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メール アドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メール ソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイル アプリ ストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「NetEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メール アカウントを開いてログインします。ログイン インターフェイスは次のとおりです。
BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は?
Apr 26, 2024 am 09:40 AM
MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。
Thunder を使用してマグネット リンクをダウンロードする方法
Feb 25, 2024 pm 12:51 PM
ネットワーク技術の急速な発展により、私たちの生活も大きく便利になりました。その 1 つは、ネットワークを介してさまざまなリソースをダウンロードして共有できることです。リソースをダウンロードする過程で、マグネット リンクは非常に一般的で便利なダウンロード方法になりました。では、Thunder マグネット リンクを使用するにはどうすればよいでしょうか?以下、詳しくご紹介していきます。 Xunlei は、マグネット リンクを含むさまざまなダウンロード方法をサポートする非常に人気のあるダウンロード ツールです。マグネット リンクは、リソースに関する関連情報を取得できるダウンロード アドレスとして理解できます。
