vue之watch用法

来源:互联网 发布:知金教育保过 编辑:程序博客网 时间:2024/06/05 03:08
对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;
//使用官方vue-cli脚手架书写<template>  //观察数据为字符串或数组   <input v-model="example0"/>   <input v-model="example1"/>  /当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数   <input v-model="example2.inner0"/></template><script>   export default {      data(){        return {          example0:"",          example1:"",          example2:{            inner0:1,            innner1:2          }        }      },      watch:{        example0(curVal,oldVal){          console.log(curVal,oldVal);        },        example1:'a',//值可以为methods的方法名'example2.inner0': 'a',  //值可以为methods的方法名        'example2.innner1': 'a'  //值可以为methods的方法名        example2:{         //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象          handler(curVal,oldVal){            conosle.log(curVal,oldVal)          },          deep:true        }      },      methods:{        a(curVal,oldVal){          conosle.log(curVal,oldVal)        }      }}</script>

原创粉丝点击