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. ショッピングカート

<!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 をよろしくお願いいたします。

以下もご興味があるかもしれません: