序文: 通常、属性は 例えば: <div id="例"> {{ message.split('').reverse().join('') }} </div> この時点で、テンプレートは単なる宣言型ロジックではなくなります。ここで必要なのは、変数 したがって、複雑なロジックの場合は、計算プロパティを使用する必要があります。 1. 基本的な例<div id="アプリ"> <h2>合計金額: {{totalPrice}}</h2> </div> <スクリプト> 定数vm = 新しいVue({ el: "#app", データ: { メッセージ: "こんにちは", 書籍: {名前: 『三国志演義』、価格: 30}、 {名前:「紅楼夢」、価格:40}、 {名前:「西遊記」、価格:50}、 {名前: '水滸伝'、価格: 60}、 ]、 }, 計算: { // 計算プロパティゲッター 合計価格: 関数 (){ 結果を 0 にします。 // `this` は vm インスタンスを参照します for (let book of this.books) { 結果 += book.price; } 結果を返す } } }) </スクリプト>
ここでは、計算プロパティ 属性には通常、 2. 計算プロパティキャッシュとメソッド式の中でメソッドを呼び出すことで同じ効果が得られることに気づいたかもしれません。 <div id="アプリ"> <h2>合計金額: {{getAllPrice()}}</h2> </div> <スクリプト> 定数vm = 新しいVue({ el: "#app", データ: { メッセージ: "こんにちは", 書籍: {名前: 『三国志演義』、価格: 30}、 {名前:「紅楼夢」、価格:40}、 {名前:「西遊記」、価格:50}、 {名前: '水滸伝'、価格: 60}、 ]、 }, メソッド: { getAllPrice: 関数 () { 結果を 0 にします。 // `this` は vm インスタンスを参照します for (let book of this.books) { 結果 += book.price; } 結果を返す } }, }) </スクリプト> 同じ関数を、計算プロパティではなくメソッドとして定義できます。どちらの方法でも最終結果はまったく同じになります。ただし、違いは、計算されたプロパティは、リアクティブな依存関係に基づいてキャッシュされることです。関連するリアクティブ依存関係が変更された場合にのみ再評価されます。つまり、
なぜキャッシュが必要なのでしょうか?巨大な配列を走査し、大量の計算を実行する必要がある、計算コストの高いプロパティ 3. 計算プロパティセッター計算プロパティにはデフォルトでは 計算: { 合計価格: 取得: 関数 () { 結果を 0 にします。 // `this` は vm インスタンスを参照します for (let book of this.books) { 結果 += book.price; } 結果を返す }, 設定: 関数 (newValue) { for (let book of this.books){ 本の価格 += 10 } } } } ここでは、 以下もご興味があるかもしれません:
|
<<: CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明
目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...
フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...
概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...
1. 画像の周りのテキスト通常のものを使用する場合、たとえば次のようになります。コードをコピーコー...
この記事では、カード ウォーターフォール レイアウトを実現するための CSS3 列のサンプル コード...
Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...
ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...
CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...
目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...
この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...
序文MySQL では、クロスデータベース クエリは主に 2 つの状況に分けられます。1 つは同じサー...
vue3コンポーネントの通信モードは次のとおりです。小道具$放出$expose / 参照$属性vモデ...
Node-red をデータベース (mysql) に接続するには、まずコンピューターに MySQL ...
開発およびデバッグのプロセスでは、新しいコードと古いコードの違いを比較する必要があります。比較には、...
目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...