Vue.js 观察者(watch)
Vue.js 观察者(watch)
watch 属性用于监视 vue 实例上的数据变动，并相应的改变其他变量的值。
用法
实例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 观察者(watch)</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<title>Vue.js 观察者(watch)</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
<p>我的名字是：{{fullName}}</p>
</div>
<script>
var em = new Vue({
el: '#app',
data: {
firstName: 'stephen',
lastName: 'curry',
fullName: 'stephen curry'
},
watch: {
firstName: function (curVal, oldVal) {
this.fullName = curVal + ' ' + this.lastName
},
lastName: function (curVal, oldVal) {
this.fullName = this.firstName + ' ' + curVal
}
}
})
</script>
</body>
</html>
上述代码中，监视了firstName和lastName这两个变量，当用户输入新的数据改变其值时，watch就会执行对应的函数，返回处理后的值并赋值给fullName变量。
注释：curVal 表示当前数据，oldVal 表示前一步数据（或默认数据），可参考实例2的代码。
实例 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 观察者(watch)</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<title>Vue.js 观察者(watch)</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="number"/>
<p>result：{{result}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1,
result: 1
},
watch: {
number: function(curVal, oldVal) {
this.result = curVal*1 + oldVal*1
}
}
})
</script>
</body>
</html>
上述代码中，result 结果为当前输入数据和前一步数据之和。另外，oldVal 参数可缺省。
注意：当监视的数据是一个数组或者对象时，curVal 和 oldVal 是相等的，因为这两个形参指向的是同一个数据对象。
Watch deep 选项
类型是对象的变量，当键值发生变化时，为了监听到数据变化，需要设置deep选项为true，如下：
实例 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 观察者(watch)</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<title>Vue.js 观察者(watch)</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="fruits.count"/>
<input type="text" v-model="fruits.name"/>
<p>fruits：{{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
fruits: {
name: "香蕉",
count: 5
},
message: '5条香蕉'
},
watch: {
fruits: {
handler(obj){
this.message = obj.count + '条' + obj.name
},
deep: true
}
}
})
</script>
</body>
</html>
计算属性 与 watch
计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
Vue.js 观察者(watch)的更多相关文章
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...
- 从Vue.js源码角度再看数据绑定
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- Vue.js依赖收集
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- Vue.js响应式原理
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...
- vue源码分析—Vue.js 源码目录设计
Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── ser ...
- Vue.js的安装及简单使用
一.Vue简介 二.Vue.js的安装 2.1.npm安装 2.1.1.node.js介绍及安装 简介: 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基 ...
随机推荐
- Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operation '=
[SQL]SELECT username,password,toutiao_uidFROM pwdtab pLEFT JOIN toutiao_action_article aON p.toutiao ...
- 8-13 canvas专题-阶段练习二（下)
8-13 canvas专题-阶段练习二(下) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...
- [Codeforces 482A] Diverse Permutation
[题目链接] https://codeforces.com/contest/482/problem/A [算法] 首先构造一个(k + 1)个数的序列 , 满足它们的差为1-k 对于i > k ...
- 第九周 Leetcode 502. IPO (HARD)
Leetcode 502 一个公司 目前有资产W 可以选择实现K个项目,每个项目要求公司当前有一定的资产,且每个项目可以使公司的总资产增加一个非负数. 项目数50000 设计一个优先队列,对于当前状态 ...
- Spark 决策树--回归模型
package Spark_MLlib import org.apache.spark.ml.Pipeline import org.apache.spark.ml.evaluation.Regres ...
- .NET Runtime version 2.0.50727.8762 - 执行引擎错误(7969097A) (80131506)
VS2010调试IIS发布的web工程提示:无法连接到 Visual Studio 开发服务器 .NET Runtime version 2.0.50727.8762 - 执行引擎错误(7969097 ...
- 【废弃】【WIP】JavaScript Object
创建: 2017/11/03 废弃: 2019/02/19 重构此篇.原文归入废弃 增加[废弃中]标签与总体任务 结束: 2019/03/03 完成废弃, 删除[废弃中]标签, 添加[废弃]标签 T ...
- bzoj 1652: [Usaco2006 Feb]Treats for the Cows【区间dp】
裸的区间dp,设f[i][j]为区间(i,j)的答案,转移是f[i][j]=max(f[i+1][j]+a[i](n-j+i),f[i][j-1]+a[j]*(n-j+i)); #include< ...
- HTML <input>标签属性
- hadoop2.x 常用端口及定义方法
一 常用端口号 1 HDFS 2 YARN 3 HBase 4 Hive 5 ZooKeeper 二 Web UIHTTP服务 1 对于存在 Web UIHTTP服务的所有 hadoop daemon ...