vue.js中$watch的用法示例
更新时间：2016年10月04日 16:31:21 作者：杜培东
这篇文章为大家详细介绍了vue.js中$watch的用法，文中给出了示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们可以一起看看吧。
前言
vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层，可以很容易的和其他库整合。代码压缩后只有24kb
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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问的大家可以留言交流。
相关文章
hover是css中的选择器，用于选择鼠标指针浮动在上面的元素。这篇文章主要介绍了vue使用v-for实现hover点击效果,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vue使用JSEncrypt实现rsa加密及挂载方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
最近一段时间，一直在做主题方面的工作。我们的主题，并不是简单切换一下颜色，或者排版变化这些，而是变化比较大的主题。比如说：主题1和主题2看起来完全不一样，功能甚至都不一样。这样，通过切换css就无法做到了，因此我思考良久，使用了如下2种方法2021-06-06
这篇文章主要介绍了如何解决el-checkbox选中状态更改问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了design vue 表格开启列排序的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
在本文中我们给大家整理了关于Vue项目服务器部署之子目录部署方法和具体步骤，需要的朋友们参考下。2019-05-05
Vue使用Clipboard.JS在h5页面中复制内容实例详解
在本篇文章里小编给大家整理了关于Vue使用Clipboard.JS在h5页面中复制内容以及相关知识点内容，需要的朋友们可以学习下。2019-09-09
这篇文章主要介绍了一文彻底搞懂Vue的MVVM响应式原理，vue则是采用发布者-订阅者模式，通过Object.defineProperty()来劫持各个属性的getter和setter，在数据变动时发布消息给订阅者，触发相应的监听回调2022-06-06
工作中vue表单使用的最多的莫过于input、textarea、select等，原生js的基础上vue通过双向数据绑定等，实现了自己独有的一套指令，这是react中没有的部分，也算是vue的一大特色2022-09-09
这篇文章主要介绍了this在vue和小程序中的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
最新评论