Vue?watch中監(jiān)聽值的變化,判斷后修改值方式
watch監(jiān)聽值的變化,判斷后修改值
計數(shù)器有最小值與最大值的限制,且中間的文本輸入框可自己輸入值。
實現(xiàn)方式是在watch中監(jiān)聽文本輸入框綁定的v-model,跟最大最小值比較后,如果有需要,則改變值。
<mu-text-field v-model.number="weightNum" solo full-width ></mu-text-field>
watch: { //監(jiān)聽用戶輸入的重量值 //如果超過最大重量,彈出提示,并且將輸入框重量置于最大值 //如果低于最小重量,彈出提示,并且將輸入框重量置于最小值 weightNum(val){ if(val<this.weightLimit.minWeight){ this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight}); this.$data.weightNum = this.weightLimit.minWeight; } else if(val>this.weightLimit.maxWeight){ this.$toast.showWarn({message: 'You can only enter between ' +this.weightLimit.minWeight+ ' and ' +this.weightLimit.maxWeight}); this.$data.weightNum = this.weightLimit.maxWeight; } } },
核心:
this.$data.weightNum = this.weightLimit.minWeight;
這里如果直接
this.weightNum = this.weightLimit.minWeight;
是沒有用的。
Vue_watch()方法,檢測數(shù)據(jù)的改變。
<script type="text/javascript"> var vm = new Vue({ el: app01, data:{ a:'test', } }) // 檢測數(shù)據(jù)'a'的改變,放數(shù)據(jù)改變時執(zhí)行 vm.$watch('a', function(newval, oldval){ console.log(newval, oldval); }) vm.$data.a = 'wdc' </script>
watch監(jiān)聽data函數(shù)中數(shù)據(jù)改變的三種方式
在Vue中有一個watch方法可用于監(jiān)聽數(shù)據(jù)的改變,避免重復(fù)添加監(jiān)聽函數(shù),watch中有三種監(jiān)聽數(shù)據(jù)的方式:
1.常用型(淺層監(jiān)聽)
如此即可監(jiān)聽loading值的變化,并進行相應(yīng)操作。
2.深層監(jiān)聽(利用deep屬性)
這樣利用deep屬性,將deep設(shè)為true,則可進行深層監(jiān)聽,只要modalForm中任意一個屬性的值發(fā)生改變,則都會調(diào)用handler函數(shù),當(dāng)然該函數(shù)名可隨意。
3.深層監(jiān)聽某一個特定屬性(用字符串表示對象屬性的調(diào)用)
此時只會監(jiān)聽modalForm里面的model屬性,當(dāng)他的值發(fā)生改變時才會執(zhí)行回調(diào)函數(shù)。
4、利用computed計算屬性
此時在添加了計算屬性后,可以像淺層監(jiān)聽一樣的方式監(jiān)聽深層的model屬性值的改變。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10webpack+vue.js構(gòu)建前端工程化的詳細(xì)教程
這篇文章主要介紹了webpack+vue.js構(gòu)建前端工程化的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05vue子組件設(shè)計provide和inject理解使用
這篇文章主要為大家介紹了vue子組件設(shè)計provide和inject理解及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08