Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。

在实例化时为每个键调用 $watch() ;

<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:{
         //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象
          handler(curVal,oldVal){
            conosle.log(curVal,oldVal)
          },
          deep:true
        }
      },
      methods:{
        a(curVal,oldVal){
          conosle.log(curVal,oldVal)
        }
      }
}
</script>

VUE -- vue.js中$watch的用法示例的更多相关文章

  1. vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

  2. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  3. Vue.js几个简单用法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined

    我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...

  5. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  6. 在线jquery.min.js、vue.min.js引用

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...

  7. vue-cli3 vue.config.js 配置

    // cli_api配置地址 https://cli.vuejs.org/zh/config/ module.exports = { baseUrl: './', // 部署应用包时的基本 URL o ...

  8. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

  9. vue.eslintrc.js常用配置

    vue.eslintrc.js module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/esse ...

随机推荐

  1. 【CF103D】Time to Raid Cowavans(分块)

    题意: 思路:院赛防AK题,然而还没来得及做就被数据出锅的题坑了…… #include<cstdio> #include<cstring> #include<string ...

  2. bzoj 1096 斜率优化DP

    首先比较容易的看出来是DP,w[i]为前i个工厂的最小费用,那么w[i]=min(w[j-1]+cost(j,i))+c[i],但是这样是不work的,复杂度上明显过不去,这样我们考虑优化DP. 设A ...

  3. hdu 4506 小明系列故事——师兄帮帮忙

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4506 题目大意:找规律,判断k的t次幂前面的系数. #include <iostream> ...

  4. django unresolved template

    参考:https://stackoverflow.com/questions/8487410/pycharm-django-1-3-static-url-in-templates-unresolved ...

  5. IPC网络高清摄像机基础知识4(Sensor信号输出YUV、RGB、RAW DATA、JPEG 4种方式区别) 【转】

    转自:http://blog.csdn.net/times_poem/article/details/51682785 [-] 一 概念介绍 二 两个疑问 三 RAW和JPEG的区别 1 概念说明 3 ...

  6. Page.Response.Buffer与Response.Redirect一起用报错“无法在发送 HTTP 标头之后进行重定向”

    Page.Response.Buffer与Response.Redirect一起用报错“无法在发送 HTTP 标头之后进行重定向” 原因还未知..

  7. junit单元测试+junit与Spring结合

    配置:右键要加入单元测试的工程,选择properties,然后选择java build path,选择add library,选择junit即可. 编写:右键要测试的class,new一个junit ...

  8. linux tomcat 乱码

    使用vi编辑器编辑长文件时,常常是头昏眼花,也找不到需要更改的内容. 这时,使用查找功能尤为重要. 方法如下: 1.命令模式下输入“/字符串”,例如“/Section 3”. 2.如果查找下一个,按“ ...

  9. WebDriver框架之自动运行失败的case

    大家在运行自动化case的时候都会碰到失败的情况,有的时候可能是被测程序有bug,还有就是网络的问题,如果想采取失败的case再运行一次的机制,那么有bug的情况,即使再运行N次还是失败,那么如果是网 ...

  10. Jquery EasyUI选项卡-Tabs的使用方法

    以下是easyUI的tabs的简单实用介绍. var e =$('#main').tabs('exists','accordion'); if(e==true){  $('#main').tabs(' ...