本篇文章為大家展示了怎么在Vue2 中使用watch監聽屬性的改變，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到浦江網站設計與浦江網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創造個性化、用戶體驗好的作品，建站類型包括：成都網站制作、做網站、企業官網、英文網站、手機端網站、網站推廣、域名注冊、網站空間、企業郵箱。業務覆蓋浦江地區。

代碼：

<div id="app2">
 <label>幼兒園入學年齡（3～6）：</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </button>
 <p v-show="hasErr">{{ errMsg }}</p>
</div>
<script>
 var app = new Vue({
  el:"#app2",
  data:{
   child:{age:2},
   hasErr:false,
   errMsg:""
  },
  methods:{
   older:function () {
    this.child.age ++;
   },
   younger:function () {
    this.child.age --;
   },
   hideErr:function () {
    var self = this;
    setTimeout(function () {
     self.hasErr = false;
    },3000);
   }
  },
  //構造器內的watch
  watch:{
   'child.age':function (newVal,oldVal) {
    if(newVal > 6){
     this.child.age = 6;
     this.errMsg = "不得大于6歲";
     this.hasErr = true;
     this.hideErr();
    }
   }
  }
 });
 
 app.$watch("child.age", function (newVal,oldVal) {
  if(newVal < 3){
   app.child.age = 3;
   app.errMsg = "不得小于3歲";
   app.hasErr = true;
   app.hideErr();
  }
 }, {deep:true, immediate:true}); //deep默認true immediate指示是否立即以表達式的當前值觸發回調
 
</script>

上述內容就是怎么在Vue2 中使用watch監聽屬性的改變，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

網頁題目：怎么在Vue2中使用watch監聽屬性的改變
鏈接地址：http://www.js-pz168.com/article22/gddjjc.html

成都網站建設公司_創新互聯，為您提供ChatGPT、網站改版、電子商務、外貿網站建設、動態網站、

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯