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默認(rèn)true immediate指示是否立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)
</script>
以上這篇Vue2 監(jiān)聽屬性改變watch的實例代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))
本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
關(guān)于element-ui中el-form自定義驗證(調(diào)用后端接口)
這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗證(調(diào)用后端接口)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vite打包項目時,需要去除開發(fā)時加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時去除console的方法實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-08-08
vue開發(fā)中如何在js文件里使用pinia和組件同步
在JavaScript文件中封裝涉及到使用Pinia的方法時,發(fā)現(xiàn)Pinia和組件內(nèi)容并不同步,二者的狀態(tài)是獨立的,解決辦法是,在新建對象的時候,將Pinia作為參數(shù)傳入,本文給大家介紹vue開發(fā)中如何在js文件里使用pinia和組件同步,感興趣的朋友一起看看吧2024-10-10
axios封裝，使用攔截器統(tǒng)一處理接口，超詳細(xì)的教程（推薦）
這篇文章主要介紹了axios封裝使用攔截器處理接口，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue3中如何使用fullcalendar日歷插件,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue3的api解讀之ref和reactive詳解，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
詳解vuex中mutations方法的使用與實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vuex中mutations方法的使用與實現(xiàn)的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
這篇文章主要介紹了vue、element實現(xiàn)表格表頭縱向顯示方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10