Vue?watch中監(jiān)聽值的變化,判斷后修改值方式

更新時間：2022年04月11日 08:37:46 作者：水木Moira

這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

watch監(jiān)聽值的變化,判斷后修改值

在這里插入圖片描述

計數器有最小值與最大值的限制，且中間的文本輸入框可自己輸入值。

實現(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()方法，檢測數據的改變。

 <script type="text/javascript">
            var vm = new Vue({
                el: app01,
                data:{
                    a:'test',
                }
            })
            // 檢測數據'a'的改變，放數據改變時執(zhí)行
            vm.$watch('a', function(newval, oldval){
                console.log(newval, oldval);
            })
            vm.$data.a = 'wdc'
        </script>