首页 > 网络编程 > JavaScript > javascript类库 > vue.js > watch监听值的变化,判断后修改值

Vue watch中监听值的变化,判断后修改值方式

2022-04-11 08:35:11 作者：水木Moira

这篇文章主要介绍了Vue watch中监听值的变化,判断后修改值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

watch监听值的变化,判断后修改值

在这里插入图片描述

计数器有最小值与最大值的限制，且中间的文本输入框可自己输入值。

实现方式是在watch中监听文本输入框绑定的v-model，跟最大最小值比较后，如果有需要，则改变值。

<mu-text-field v-model.number="weightNum" solo full-width ></mu-text-field>

watch: {
            //监听用户输入的重量值
            //如果超过最大重量，弹出提示，并且将输入框重量置于最大值
            //如果低于最小重量，弹出提示，并且将输入框重量置于最小值
            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'的改变，放数据改变时执行
            vm.$watch('a', function(newval, oldval){
                console.log(newval, oldval);
            })
            vm.$data.a = 'wdc'
        </script>