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.js中$watch的用法示例的更多相关文章

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

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

  2. Vue.js 作用域、slot用法(单个slot、具名slot)

    作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...

  3. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  4. Vue.js中ref ($refs)用法举例总结

    原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type=& ...

  5. Vue.js几个简单用法

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

  6. vue.js+vue-router+webpack keep-alive用法

    本文是机遇 提纲:   现有需求 各个解决方案的优缺点 相关的问题延伸 keep-alive使用详解   现有需求   每个项目中都存在许多列表数据展示页面,而且通常包含一些筛选条件以及分页.   并 ...

  7. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  8. Vue.js 的精髓——组件

    开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...

  9. Vue.js用法详解(一)更新中~

      前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...

随机推荐

  1. Phoenix中的timestamp字段查询以及timestamp的比较查询

    1 查询语法 SELECT TO_CHAR(createtime, 'yyyy-MM-dd HH:mm:ss') FROM USER 2 需要比较timestamp的语法查询 select * fro ...

  2. Atmel芯片使用

    ATMEL系列芯片 9X35 9G35可pin-to-pin替代9G10,具体需核对.此外即使pin-to-pin替代,外部应用也不一样. A5D2处理器,可支持linux/andriod. M7(M ...

  3. from表单中 action的后面"" 内如果是 servlet的虚拟路径的话

    <form action="login" method="post"> ====================================== ...

  4. Hadoop_03_Hadoop分布式集群搭建

    一:Hadoop集群简介: Hadoop 集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起: HDFS集群:负责海量数据的存储,集群中的角色主要有: NameNo ...

  5. linux-Redhat7 windows物理机与虚拟机设置共享目录

    一                   windows物理机与虚拟机设置共享目录 1.1        WMware Workstation点击重新安装WMware Tools 此时会弹出在客户机装载 ...

  6. linux常用查看命令

    一般查看 cat -n 文件名 n 代表显示行号 分页查看 more 文件名 more -50 文件名 -50 代表一页显示50行 向下翻页  空格 向上翻页 b more +/搜索值 文件名 查找文 ...

  7. 将本地代码使用Git上传更新至Github

    注册.配置git 1. 首先注册git image 2.然后下载.配置git 百度“git下载”,然后默认安装,注意的是最后要添加环境变量,最后安装结果如下: image 配置如下: 1.设置本地的s ...

  8. java poi 读取excel内容

    import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Row; import or ...

  9. CSS基础学习-6.CSS属性_列表、表格

  10. Spring前置方法无法阻止原方法执行(转)

    在前置方法用return的方法无法阻止原方法的执行. 该处的return 只是结束了目标方法执行前的检验方法而已,而不是结束目标方法. 使用抛异常的方式程序终止. 环绕通知可以阻止原方法的执行, pu ...