watch监听多个数据

最新推荐文章于 2024-07-11 14:01:20 发布

抑制、

最新推荐文章于 2024-07-11 14:01:20 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43486347/article/details/103662991

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

watch监听多个数据

var app = new Vue({
      el:"#app",
      data(){
          return{
            page:10,
            prodd: 80,
            getParm : {
              keyWord : this.$route.query.searchVal ||'',
              page : 1,
              proId : this.$route.query.thirdId || 0,
              catgroyId : this.$route.query.secondId || 0,
              brandName : '',
              sortType : 0,
              sortMethod : ''
           }
        }
      },
      computed:{
        //把两个数据合并成一个数据
      'priceParam':function(){
        return this.getParm.sortType,this.getParm.sortMethod
      }
      'priceParamHeight': function(){
        return this.page,this.prodd
      }
    },
    
    watch:{
        //监听data里多个数据
        'priceParamHeight':function(){
            //priceparamHeight改变执行的行数
        },
        //监听对象里多个数据
        priceParam:{
          handler(newValue,oldValue){ //深度监听
            //priceParam改变执行的函数
          },
          deep:true
        },
        //监听对象
        getParm:{
        handler(newValue,oldValue){  //深度监听
          //getParam里面任一个值改变，都会执行的函数
          },
        deep:true
       },
       //如果想要监听getParm里面某个值的变化，比如监听getParm对象的keyword的值，可以这么写（监听对象里的某个属性要加' '）
       'getParam.keyWord':{
       handler(newValue,oldValue){
        //getParam.keyWord改变，执行的函数
       
        },
      deep:true
     }


    }

    })