使用watch监听对象里面值的变化

 更新时间:2023年01月14日 11:14:23   作者:阿wei程序媛  
这篇文章主要介绍了使用watch监听对象里面值的变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

watch监听对象里面值的变化

后台管理有时候有选择选择框的不同选项,会影响下一个选择框的内容,如下图

 

 .这个时候就可以用到watch监听

1.样式代码

<div class="list">
      订单类型:
      <el-select v-model="getorderType" placeholder="请选择" @change="getchange">
           <el-option
                v-for="item in options1"
                :key="item.orderType"
                :label="item.label"
                :value="item.orderType">
           </el-option>
      </el-select>
</div>
<div class="list">
     操作对象:
     <el-select v-model="getworksRegion" placeholder="请选择" @change="getchange1">
          <el-option
                v-for="item in options6"
                :key="item.worksRegion"
                :label="item.label"
                :value="item.worksRegion">
          </el-option>
     </el-select>
</div>

2.data里的代码

  data() {
    return {
      verifyData: this.propData,
      editBoxShow: false,
      options1: [{
        orderType: '1',
        label: '首次出售'
      },{
        orderType:"2",
        label: "二次及以上挂售"
      }
      ],
      options2: [{
        worksRegion: '0',
        label: '原创作品'
      },{
        worksRegion:"1",
        label: "首页大IP"
      },
        {
          worksRegion:"3",
          label: "盲盒"
        }
      ],
      options5: [{
        worksRegion: '0',
        label: '原创作品'
      },{
        worksRegion:"1",
        label: "首页大IP"
      },{
          worksRegion:"2",
          label: "官方藏品"
        },
        {
          worksRegion:"3",
          label: "盲盒"
        }
      ],
      options6:[],
     
      queryParams:{
        id:"",
        orderType:'',//1 正常订单(首次出售), 2 挂售订单(二次及以上挂售)
        worksRegion:"",// 0 原创 1 平台首发 2 官方藏品 3 盲盒
      },
      getorderType:"",
      getworksRegion:"",
    };
  },

3.watch监听

  watch:{
    'queryParams.orderType':function (newName,oldName){
      if(newName==1){
        this.options6 = this.options2
      }else if(newName==2){
        this.options6 = this.options5
      }
    }
  },

重点监听对象的形式为

  watch:{
    'queryParams.orderType':function (newName,oldName){//newName 新数据 oldName 老数据
      
    }
  },

对以上例子和代码进行理解,就可以理解watch监听对象里的值的变化。

watch如何深度监听对象变化

深度监听

  • handler:其值是一个回调函数。监听到变化时应该执行的函数。
  • deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  • immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时需要deep属性对对象进行深度监听

watch: {
    obj: {
      handler(newValue, oldValue) {
        console.log(newValue.id);
        this.formData.fid = newValue ? newValue.id : 0;
      },
      deep: true,
      immediate: true
    }
  },

需要注意得到是 handler 是固定写法,不能用其他的。

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

上面的视图里 之所以刷新马上就执行了 handler函数,就是因为设置了 immediate 属性为 true

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解vue 中使用 AJAX获取数据的方法

    详解vue 中使用 AJAX获取数据的方法

    本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法,在VUE开发时,数据可以使用jquery和vue-resource来获取数据,有兴趣的可以了解一下。
    2017-01-01
  • vue通过数据过滤实现表格合并

    vue通过数据过滤实现表格合并

    这篇文章主要为大家详细介绍了vue通过数据过滤实现表格合并,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue项目中各文件的使用说明

    vue项目中各文件的使用说明

    这篇文章主要介绍了vue项目中各文件的使用说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue项目打包发布后接口报405错误的解决

    vue项目打包发布后接口报405错误的解决

    这篇文章主要介绍了vue项目打包发布后接口报405错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue 页面卡死,点击无反应的问题及解决

    vue 页面卡死,点击无反应的问题及解决

    这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue生命周期与setup深入详解

    Vue生命周期与setup深入详解

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期
    2022-09-09
  • 浅谈Vue 性能优化之深挖数组

    浅谈Vue 性能优化之深挖数组

    这篇文章主要介绍了浅谈Vue 性能优化之深挖数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • 在vue项目中使用md5加密的方法

    在vue项目中使用md5加密的方法

    这篇文章主要介绍了在vue项目中使用md5加密的方法,需要的朋友可以参考下
    2018-09-09
  • vue中复用vuex.store对象的定义

    vue中复用vuex.store对象的定义

    这篇文章主要介绍了vue中复用vuex.store对象的定义,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 通过图带你深入了解vue的响应式原理

    通过图带你深入了解vue的响应式原理

    这篇文章主要介绍了通过图带你深入了解vue的响应式原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
    2019-06-06

最新评论