Vue 監視プロパティと計算プロパティ

Vue 監視プロパティと計算プロパティ

1. 監視プロパティを監視する

このプロパティは、特定のデータの変更を監視し、対応するコールバック関数の実行をトリガーするために使用されます。

基本的な使用法: オブジェクトの値を持つwatch属性を追加します。オブジェクトの属性名は監視対象のデータであり、属性値はコールバック関数です。この属性名に対応する値が変更されるたびに、コールバック関数がトリガーされて実行されます。

コールバック関数には 2 つのパラメーターがあります。

  • newVal : データが変更された後の値。
  • oldVal : データが変更される前の値。

カウンタ:

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <script src="./js/vue.js"></script>
 </head>
 <本文>
  <div id="アプリ">
   <div>カウンター {{ shu }}</div>
   <span>変更前: {{ov}}</span>
   <span>変更後: {{nv}}</span>
   <br />
   <button @click="shu++">1つ追加</button>
  </div>
  
  <スクリプト>
  var vm = 新しい Vue({
   el: '#app',
   データ: {
    シュウ:1、
    ov:0,
    0 です
   },
   方法:{
    
   }
  })
  vm.$watch("shu",function(nval,oval){
   vm.$data.ov = 楕円
   vm.$data.nv = nval
  })
  </スクリプト>
 </本文>
</html>

リスナーを追加し、カウンターの値が変更される前の値を変数ovに割り当て、変更後の値を変数nvに割り当てます。

  vm.$watch("shu",function(nval,oval){
   vm.$data.ov = 楕円
   vm.$data.nv = nval
  })


1.

1. ショッピングカート

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <script src="./js/vue.js"></script>
 </head>
 <本文>
  <div id="アプリ">
  <テーブル>
   <tr>
    <th>シリアル番号</th>
    <th>製品名</th>
    <th>製品価格</th>
    <th>購入数量</th>
    <th>オペレーション</th>
   </tr>
   <tr v-for="sp 内の sp">
    <td>{{ sp.id }}</td>
    <td>{{ sp.name }}</td>
    <td>{{ sp.money }}</td>
    <td>
    <button v-on:click="sp.sum=sp.sum-1">-</button>
    {{sp.sum}}
    <button v-on:click="sp.sum=sp.sum+1">+</button>
    </td>
    <td>
     <button v-on:click="sp.sum=0">リセット</button>
    </td>
   </tr>
  </テーブル>
  <div> 要素
   合計金額: {{ getmany() }}
  </div>
  </div>
  <スクリプト>
   var vm = 新しい Vue({
    el: '#app',
    データ: {
     補足:[
      {
       id:1,
       名前:"Apple 13",
       お金:6000、
       合計:1
      },
      {
       id:2,
       名前:"Apple 12",
       お金:5000、
       合計:1
      },
      {
       id:3,
       名前:"Apple 11",
       お金:4000、
       合計:1
      }
     ]
    },
    方法:{
     getmaney:関数(){
      var m = 0;
      for(var x=0;x<this.sps.length;x++){
       m = m + this.sps[x].money * this.sps[x].sum;
      }
      m を返します。
     }
    }
   })
  </スクリプト>
 </本文>
</html>

合計費用は以下のとおりです。

getmaney:関数(){
    var m = 0;
    for(var x=0;x<this.sps.length;x++){
   m = m + this.sps[x].money * this.sps[x].sum;
 }
 m を返します。
}


2. すべて選択し、すべて選択解除する

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <script src="./js/vue.js"></script>
 </head>
 <本文>
  <div id="アプリ">
   <input type="checkbox" id="a" value="a" v-model="che"/>
   <label for="a">a</label>
   <input type="checkbox" id="b" value="b" v-model="che"/>
   <label for="b">b</label>
   <input type="checkbox" v-model="checked" id="bok" v-on:change="ckall()" />
   <label for="box">すべて選択</label>
  </div>
  <スクリプト>
   var vm = 新しい Vue({
    el: '#app',
    データ: {
     チェック済み:false、
     che:[],
     しゅず:["a","b"]
    },
    方法:{
     ccall:関数(){
      //すべてのステータスを選択 if(this.checked){
       this.che = this.shuzu
      }それ以外{
       //すべての選択を解除 this.che=[]
      }
     }
    },
    時計:{
     "che":関数(){
      //すべて選択するかどうかを判定する if(this.che.length == this.shuzu.length){
       this.checked = true
      }それ以外{
       this.checked = false
      }
     }
    }
   })
  </スクリプト>
 </本文>
</html>

2. 計算されたプロパティ

1.計算された

特徴:

  • computedプロパティ オブジェクトでプロパティを計算する方法を定義し、ページ上で {{method name}} を使用して計算結果を表示します。
  • getter/setterを通じてプロパティ データを表示および監視します。
  • 計算されたプロパティはキャッシュされ、 getter複数の読み取りに対して 1 回だけ実行されます。
<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <script src="./js/vue.js"></script>
 </head>
 <本文>
  <div id="アプリ">
   <p>{{ 混乱 }}</p>
   <p>{{ レメス }}</p>
   <p>{{ mess.split('').reverse().join('') }}</p>
  </div>
  <スクリプト>
   var vm = 新しい Vue({
    el: '#app',
    データ:{
     混乱:'abcd'
    },
    計算: {
     remess:関数(){
      this.mess.split('').reverse().join('') を返します
     }
    }
   })
  </スクリプト>
 </本文>
</html>

2.方法

computed依存関係キャッシュに基づいて行われ、関連する依存関係が変更された場合にのみ再評価されます。 methodsを使用すると、再レンダリング時に関数が常に再度呼び出されます。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <script src="./js/vue.js"></script>
 </head>
 <本文>
  <div id="アプリ">
   <input v-model="mess" />
   <p>{{ 混乱 }}</p>
   <p>{{ レメス }}</p>
   <p>{{ remess2() }}</p>
  </div>
  <スクリプト>
   var vm = 新しい Vue({
    el: '#app',
    データ:{
     混乱:'abcd'
    },
    計算: {
     remess:関数(){
      this.mess.split('').reverse().join('') を返します
     }
    },
    メソッド: {
     remess2:関数(){
      this.mess.split('').reverse().join('') を返します
     }
    }
   })
  </スクリプト>
 </本文>
</html>

3. セッター

ページが特定のデータを取得すると、まずデータ内を検索します。データが見つからない場合は、計算属性内を検索します。計算属性内のデータを取得すると、get メソッドが自動的に実行され、set メソッドも提供されます。 computedプロパティにはデフォルトではgetterのみがありますが、必要に応じてセッターを提供することもできます。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <script src="./js/vue.js"></script>
 </head>
 <本文>
  <div id="アプリ">
   <p>{{ サイト }}</p>
  </div>
  <スクリプト>
   var vm = 新しい Vue({
    el: '#app',
    データ: {
     名前: 'xiaowang',
     '01' の
    },
    計算:{
     サイト:{
      取得: 関数(){
       this.name+' '+this.cls を返す
      },
      設定: 関数(値){
       var names = Value.split('|')
       this.name = 名前[0]
       this.cls = 名前[1]
      }
     }
    }
   })
   vm.site = 'xiaowang|01';
   document.write('name:'+vm.name);
   document.write('<br>');
   document.write('class:'+vm.cls);
  </スクリプト>
 </本文>
</html>

Vue リスニング プロパティと計算プロパティに関するこの記事はこれで終わりです。Vue リスニング プロパティと計算プロパティに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 計算プロパティ実装トランスクリプト
  • Vue の計算プロパティとプロパティリスニングについての簡単な説明
  • Vue の計算プロパティ
  • Vue の計算プロパティの紹介
  • Vueは計算プロパティを使用して動的スライダーの作成を完了します
  • Vue の計算プロパティとデータ取得方法
  • Vue の計算プロパティをご存知ですか?
  • Vueの計算プロパティ名ケースの3つの実装方法

<<:  自動検索提案機能のスタイルファイルを入力します: suggestion.css

>>:  CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

推薦する

MySQL ルートパスワードをリセットする方法

目次1. ルートパスワードを忘れてしまい、データベースにアクセスできない: DBA にとって、スーパ...

Windows システム mysql5.7.18 インストール グラフィック チュートリアル

Windows システム向け MySQL インストール チュートリアルダウンロード1. https:...

Linux lsof コマンドの使用方法の詳細な説明

lsof (開いているファイルのリスト) は、プロセスによって開かれたファイルを表示するツールです。...

データ構造 - ツリー (III): 多方向検索ツリー B ツリー、B+ ツリー

多方向探索ツリー完全二分木の高さ: O(log2N)、ここで2は対数完全なM方向探索木の高さ: O(...

Vue でコミュニケーションを実装する 8 つの方法

目次1. コンポーネント通信1. Props 親コンポーネント ---> 子コンポーネント通信...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

dockerfile における ENTRYPOINT と CMD の組み合わせと違い

前回の記事【dockerコンテナのためのdockerfileを詳しく解説】では、dockerfile...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...

MySQLデータベースでスロークエリログを有効にする方法の詳細な説明

データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

HTML マークアップ言語 - フォーム

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

JS ループで async と await を正しく使用する方法

目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...

Nginx インストール エラーの解決方法

1. nginx-1.8.1.tar.gzを解凍する2. fastdfs-nginx-module-...