首页 / 新闻资讯 / 正文

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

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>