Vue中的watch的简单例子

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(newval,oldval) {
        //具体内容
      }
    }
  };
</script>

以上是最简单的应用

当需要监听对象中的某个属性时

<script>
    export default{
        data(){
            return{
                something:{
                   name:'jake',
                   age:18
            },
         watch:{
             'something.name'(new,old){//**需要将对象的属性放在' '内即可
             //......
              }
         }        
</script>        

要监听整个对象时

watch:{
      something:{
        handler(newval,oldval){
         //......
        },
        deep:true//对象内部的属性监听,也叫深度监听
      },

除此之外还可以监听路由,监听路由以后用到了在做补充 

欢迎各位前端大佬指点一下本小白 T-T

 

posted @ 2020-02-27 14:25  卑微小吴  阅读(749)  评论(0)    收藏  举报