Vue 'watch' 选项

实例

在 watch 选项中使用观察程序，使其无法使用 <input type="range"> 选择 20 到 70 之间的值。

export default {
  data() {
    return {
      rangeVal: 4
    };
  },
  watch: {
    rangeVal(val) {
      if( val>20 && val<70) {
        if(val<40){
          this.rangeVal = 20;
        }
        else {
          this.rangeVal = 70;
        }
      }
    }
  }
};

运行一下

定义与用法

watch 选项是一个包含 Vue 实例上声明的所有 watcher 观察程序的对象。

watcher 观察程序是一个与数据属性或计算属性同名的函数。只要具有相同名称的属性发生更改，就会自动调用观察程序。

调用 watcher 时，新值和以前的值可作为 watcher 函数的参数。

注意：声明 watcher 时应避免使用箭头函数，因为无法使用 this 关键字从此类函数内部访问 Vue 实例。

当使用对象语法（参见下面的实例）编写 watcher 时，这些选项可用:

选项	描述
handler	这是 watch 函数的写入位置。
'method name'	通过以字符串形式提供方法名称，可以设置 watcher 来调用方法。
deep	默认值为 'false'。如果 watcher 是 deep，那么它也会对 watcher 设置为 watch 属性的进一步更改作出反应
immediate	创建 watcher 后立即触发该 watcher 当 'immediate' 设置为 'true' 时，第一次触发 watcher 时，旧值将为 'undefined'
flush	默认值为 'pre'。指定相对于呈现组件的时间运行回调函数的时间可能的值为 'pre', 'post' 和 'sync'。请谨慎使用 flush 选项。
onTrigger/onTrack	用于调试仅适用于开发模式。

注意：也可以使用 $watch() 方法创建观察程序。

更多实例

实例

使用对象语法的 watcher。

<template>
  <h2>Example watch Option</h2>
  <p>The 'rangeVal' watcher is written with the object syntax, with immediate: true, so that rangeVal is moved to '70' when the page first loads:</p>
  <input type="range" v-model="rangeVal">
  <p>rangeVal: <span>{{ rangeVal }}</span></p>
</template>
<script>
export default {
  data() {
    return {
      rangeVal: 40
    };
  },
  watch: {
    rangeVal: {
      handler(val) {
        if (val > 20 && val < 70) {
          if (val < 40) {
            this.rangeVal = 20;
          }
          else {
            this.rangeVal = 70;
          }
        }
      },
      immediate: true
    }
  }
};
</script>
<style>
span {
  padding: 3px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  background-color: lightgreen;
}
</style>

关联页面

Vue 教程 : Vue 观察程序

Vue 教程: Vue v-model 指令

Vue 参考引用: Vue $watch() 方法

Vue 'watch' 选项

实例

定义与用法

更多实例

实例

关联页面

分类导航