Vue2 監(jiān)聽屬性改變watch的實例代碼
更新時間：2018年08月27日 17:06:57 作者：xuanwuziyou
今天小編就為大家分享一篇Vue2 監(jiān)聽屬性改變watch的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
效果：
代碼：
<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默認true immediate指示是否立即以表達式的當(dāng)前值觸發(fā)回調(diào)
</script>
以上這篇Vue2 監(jiān)聽屬性改變watch的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。本文將詳細介紹Vue組件選項props,需要的朋友可以參考下2017-08-08
每個Vue實例在創(chuàng)建時都要經(jīng)過一系列初始化,?例如設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到DOM并在數(shù)據(jù)變化時更新DOM等，同時,?也會運行一些叫作生命周期鉤子的函數(shù)，接下來讓我們一起來探索Vue實例被創(chuàng)建時都經(jīng)歷了什么，感興趣的同學(xué)跟著小編一起來探討吧2023-05-05
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開始到測試運行給大家講解的非常詳細，需要的朋友可以參考下2022-11-11
Vue項目中Api的組織和返回數(shù)據(jù)處理的操作
這篇文章主要介紹了Vue項目中Api的組織和返回數(shù)據(jù)處理的操作，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue項目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue實現(xiàn)移動端H5數(shù)字鍵盤組件使用詳解
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端H5數(shù)字鍵盤組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
socket io與vue-cli的結(jié)合使用的示例代碼
這篇文章主要介紹了socket io與vue-cli的結(jié)合使用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
Vue利用History記錄上一頁面的數(shù)據(jù)方法實例
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
本篇文章主要介紹了vue項目中用cdn優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01