序文: 通常、属性は 例えば: <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 でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明
mysql5.7.21 zipの詳細なインストール手順は次のとおりです。 1. 解凍して指定されたデ...
目次1. Vueルーター1. 説明2. 選択したルートのレンダリング: 3. 基本的な動作原理2. ...
かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...
v-for ディレクティブリストといえば、ループについても触れなければなりません。v-for 命令は...
Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...
1.1 はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメ...
序文JavaScript では、document.querySelector("#demo...
この記事では、MySQL 5.7.16 ZIPパッケージのインストールと設定のチュートリアルを参考ま...
目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...
今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...
この記事を読む前に、ボリューム、バインドマウント、tmpfs マウントの基本を理解しておいてください...
目次1. JS オブジェクトDOM –1、機能–2、テスト3. jQuery –1. 概要–2、使用...
この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています...
以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...