Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼

更新時間：2018年08月27日 17:06:57 作者：xuanwuziyou

今天小編就為大家分享一篇Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

效果：

代碼：

<div id="app2">
 <label>幼兒園入學(xué)年齡（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);
   }
  },
  //構(gòu)造器內(nèi)的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默認(rèn)true immediate指示是否立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)
 
</script>

以上這篇Vue2 監(jiān)聽屬性改變watch的實(shí)例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue組件選項props實(shí)例詳解
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細(xì)介紹Vue組件選項props,需要的朋友可以參考下
2017-08-08
深入了解Vue之組件的生命周期流程
每個Vue實(shí)例在創(chuàng)建時都要經(jīng)過一系列初始化,?例如設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時更新DOM等，同時,?也會運(yùn)行一些叫作生命周期鉤子的函數(shù)，接下來讓我們一起來探索Vue實(shí)例被創(chuàng)建時都經(jīng)歷了什么，感興趣的同學(xué)跟著小編一起來探討吧
2023-05-05
Vue+ ArcGIS JavaScript APi詳解
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開始到測試運(yùn)行給大家講解的非常詳細(xì)，需要的朋友可以參考下
2022-11-11
Vue項目中Api的組織和返回數(shù)據(jù)處理的操作
這篇文章主要介紹了Vue項目中Api的組織和返回數(shù)據(jù)處理的操作，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
vue項目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-03-03
vue實(shí)現(xiàn)移動端H5數(shù)字鍵盤組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端H5數(shù)字鍵盤組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
socket io與vue-cli的結(jié)合使用的示例代碼
這篇文章主要介紹了socket io與vue-cli的結(jié)合使用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
Vue利用History記錄上一頁面的數(shù)據(jù)方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
vue項目中用cdn優(yōu)化的方法
本篇文章主要介紹了vue項目中用cdn優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01