美文网首页
Vue中watch的简单应用

Vue中watch的简单应用

作者: 五四青年_4e7d | 来源:发表于2020-04-15 23:31 被阅读0次

watch可以用来监测Vue实例上的数据变动

情景一

tableData是一个表格的循环数组,使用 watch对页面数据进行监听,如果某个参数改变,弹出一个对话框;

 watch: {
    tableData(val, newval) {
      console.log("___________")
      console.log(val)
      console.log(newval)
     for(var i = 0; i < newval.length;i++){
    
      console.log(  newval[i].name)
      if(newval[i].name == "数据144")  {
        alert(1)
      }
     }
    }
   },

情景二

watch监听一个方法,数据改变直接触发方法,changeData定义在方法中

watch: {
    tableData: 'changeData' // 值可以为methods的方法名
 },
 changeData(curVal,oldVal){
     conosle.log(curVal,oldVal)
  }

相关文章

  • Vue中watch的简单应用

    watch可以用来监测Vue实例上的数据变动 情景一 tableData是一个表格的循环数组,使用 watch对页...

  • vue2升级vue3:composition api中监听路由参

    vue2 的watch回顾 我们先回顾一下vue2中watch 《watch性能优化:vue watch对象键值说...

  • Vue中watch的详细用法

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:''...

  • vue watch基础用法

    在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法: 直...

  • Vue中的watch用法

    Vue中的watch用法 Vue.js中的watch主要用于观察Vue实例上的数据变动。 栗子:

  • 2021-06-16 问题总结(一)

    1、Vue中的computed和watch的实际应用 ① 关于watchwatch就是监听某个值的变化,在值发生变...

  • Vue的watch和computed属性

    Vue的watch属性 Vue的watch属性可以用来监听data属性中数据的变化 可以从上述代码中实践得知,输入...

  • watch的简单应用

    一、基本应用 这个就浅显易懂了,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起...

  • vue 父子组件 执行时机学习

    前言 简单验证一下 vue 中各选项(生命周期、watch、 computed等) 代码验证 单个组件的运行顺序 ...

  • Vue 的过滤器

    前言:Vue 中的过滤器(filter)不能替代 Vue 中的 methods、computed 或者 watch...

网友评论

      本文标题:Vue中watch的简单应用

      本文链接:https://www.haomeiwen.com/subject/yxbkvhtx.html