ホームページ > 記事 > ウェブフロントエンド > vue2.0 リスニング属性の使用法の概要と概要

vue2.0 リスニング属性の使用法の概要と概要

不言オリジナル: 2018-07-18 09:26:341825ブラウズ

仕事では、特定の属性値の変更を監視する必要があることがよくあります。このとき、監視属性 watch を使用する必要があります。ここでは、watch 属性を使用する 3 つのシナリオをまとめます。

1. 基本的なバージョン監視:

シーンは次のとおりです: 年齢が 0 ～ 15 歳の場合、プロンプトメッセージは次のとおりです。 25 歳の場合、プロンプトメッセージ: あなたはすでに 10 代です。年齢が 25 歳以上の場合、プロンプトメッセージ: あなたは成長しました。要件に従って、監視属性を含む次のコードを取得します:

<template>
  <p id="app">
    年齡：<input type="number" v-model="age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      infoMsg:""
    }
  },
  watch:{
    age:function(val,oldval){
      if(val>0 && val<15){
        this.infoMsg="你还是个小孩"
      }else if(val>15 && val<25){
        this.infoMsg="你已经是个少年"
      }else{
        this.infoMsg="你已经长大了"
      }
    }
  }
}
</script>

特別な説明が必要な点ここで、監視属性メソッドの 2 つのパラメーターの意味: 最初の val は、監視されている属性の値です。 person、oldval は属性が変更される前の値です。これは仮パラメータであるため、パラメータの名前は自分で定義できますが、パラメータの意味は変わりません。

2. 高度なバージョン監視:

要件を変更しましょう: 基本的なルールは変更されませんが、バックグラウンドデータベースの変更のため (円を描いて彼を呪う)、そのようなデータ構造を送信する必要があります

 data() {
    return {
      info: {
        age: ""
      },
      infoMsg: ""
    };
  },

監視されるのは、オブジェクト情報の属性の age 値の変更であるため、詳細な監視を使用する必要があります。具体的なコードは次のとおりです。



<script>
export default {
  data() {
    return {
      info: {
        age: &quot;&quot;
      },
      infoMsg: &quot;&quot;
    };
  },
  watch: {
    info: {
      handler: function(val, oldval) {
        var that = this;
        if (val.age > 0 && val.age < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val.age > 15 && val.age < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

ここで注意すべき点が 2 つあります。 1. ここでの関数は実行できません。アロー関数を使用する場合、これのポイントは

global になります。 2. ここで追加された追加属性が deep であることがわかります。これは、詳細な監視を有効にするかどうかを意味し、有効な場合は値が true、そうでない場合は false になります。

3. 最も高度な監視:

2 番目のケースに関して、問題を発見したかどうかはわかりません。監視しているのはオブジェクト内の特定の属性の変更ですが、値が多数ある場合このオブジェクトでは、2 番目の方法も監視に使用できますが、これは監視上の欠陥です。したがって、このようなことは発生しません。計算された (計算された属性) を組み合わせて、上記のコードを最適化できます:

<template>
  <p id="app">
    年齡：<input type="number" v-model="info.age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      info: {
        age: "",
        name: "",
        hobit: ""
      },
      infoMsg: ""
    };
  },
  computed: {
    ageval: function() {
      return this.info.age;
    }
  },
  watch: {
    ageval: {
      handler: function(val, oldval) {
        var that = this;
        if (val > 0 && val < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val > 15 && val < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

上記から、今回は計算された属性 ageval を監視していることがわかり、計算された属性は情報オブジェクトの値の年齢を返し、その値と比較します。 2 番目のコードでは、監視されている 2 つのコードのうち 1 つはオブジェクト情報であり、もう 1 つは情報オブジェクトの年齢値であることがわかります。これは期待どおりの結果です。

vue2.0 リスニング属性の使用法の概要と概要

1. 基本的なバージョン監視:

関連記事