Vue中watch的简单应用
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。
如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。
下面写两个demo,参考demo来了解一下
demo1
<template>
<div>
<el-input v-model="demo"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: '',
value: ''
};
},
watch: {
demo(val) {
this.value = this.demo;
}
}
};
</script>
上面这个就浅显易懂了,通过watch来直接监测demo,如果demo的值变化,value的值也会跟着一起变化。
demo2
<template>
<div>
<el-input v-model="demo.name"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: {
name: ''
},
value: ''
};
},
computed: {
newName() {
return this.demo.name;
}
},
watch: {
newName(val) {
this.value = val;
}
}
};
</script>
上面这个例子,如果watch监测的是一个对象的话,直接使用watch是不行的,此时我们可以借助于computed计算属性来完成。
demo3
<div id="app">
<input type="text" v-model="childrens.name" />
<input type="text" v-model="lastName" />
</div> <script type="text/javascript">
var vm = new Vue( {
el: '#app',
data: {
childrens: {
name: '小强',
age: 20,
sex: '男'
},
tdArray:["1","2"],
lastName:"张三"
},
watch:{
childrens:{
handler:function(val,oldval){
console.log(val.name)
},
deep:true//对象内部的属性监听,也叫深度监听
},
'childrens.name':function(val,oldval){
console.log(val+"aaa")
},//键路径必须加上引号
lastName:function(val,oldval){
console.log(this.lastName)
}
},//以V-model绑定数据时使用的数据变化监测
} );
vm.$watch("lastName",function(val,oldval){
console.log(val)
})//主动调用$watch方法来进行数据监测
</script>
</body>
数组的变化,不需要深度watch。
嗯,就酱~
Vue中watch的简单应用的更多相关文章
- vue中axios的简单使用
我们一般在用jq的时候会使用到ajax来进行与服务器之间的交流,vue中也提供了相应的类似于ajax的方法-axios来进行与服务器之间的数据传递 现在的这篇是最简单的使用,后续会添加上来复杂的使用 ...
- vue中简单的小插曲
我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({ el:"#app", da ...
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...
- axios在Vue中的简单应用(一)
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- axios在vue中的简单配置与使用
一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/ ...
- vue中html、js、vue文件之间的简单引用与关系
有关vue文件记录:index.html在html中运用组件 <body> <app></app> <!-- 此处app的组件为入口js main.js中定义 ...
随机推荐
- C语言-一个fopen函数中未使用二进制模式(b)引发的血案
转自:http://blog.csdn.net/hinyunsin/article/details/6401854 最近写了一个网络文件传输模块,为了让这个模块具有更好的移植性,我尽量使用C标准IO ...
- 我也来谈谈使用Zen Coding快速开发html和css原理
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- Javascript - demo 与 捷径
1.页面的后退.刷新.前进 function back(){ history.go(-1); // 后退 } function forward(){ history.go(+1); // 前进 1 页 ...
- C语言变长參数的认识以及宏实现
1.认识 变长參数是C语言的特殊參数形式.比如例如以下函数声明: int printf(const char *format, ....); 如此的声明表明,printf函数除了第一个參数类型为con ...
- IOS MagicRecord 详解 (转载)
2014-10-22 14:37 6137人阅读 评论(6) 收藏 举报 IOSMagicRecordCoreData 目录(?)[+] 刚开始接触IOS不久,尝试着翻译一些博客,积累技术,与大家共享 ...
- SVN常见问题(转)
svn常见问题,报错,命令及我的总结 (2013-07-19 18:07:27) 转载▼ 我自己犯过的一个错误是:/svn/MyERP_core_Main/!svn/act/b8bd621b- ...
- abp相关
在.core中增加类.并指定属性长度. nutget 中运行Add-Migration 名称 Update-Database -Verbose 迁移成功. 1.安装指定版本类库install-pack ...
- golang解析json
解析json,在很多语言都是很常用的,go提供了相应的包"encoding/json"来处理.直接上代码,如下: package main import ( "encod ...
- 对Servlet容器的补充和一个问题的请教
[0]README 0.1)本文是对 一个servlet容器 的补充: 0.2)发这个博文的最终目的是为了请教各位前辈,帮我解决一个问题,问题描述在文末, 谢谢: [1]Servlet容器 1.1) ...
- weixin oauth 授权
1. 先了解下请求授权页面的构造方式: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_u ...