VUE -- vue.js中$watch的用法示例
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的用法示例的更多相关文章
- vue.js中$watch的用法示例
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- Vue.js几个简单用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined
我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- 在线jquery.min.js、vue.min.js引用
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...
- vue-cli3 vue.config.js 配置
// cli_api配置地址 https://cli.vuejs.org/zh/config/ module.exports = { baseUrl: './', // 部署应用包时的基本 URL o ...
- vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发
vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...
- vue.eslintrc.js常用配置
vue.eslintrc.js module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/esse ...
随机推荐
- GDOI2015的某道题目
分析: 考试的时候由于一些神奇的原因(我就不说是什么了)...没有想$C$题,直接交了个暴力上去... 然后发现暴力的数组开的太大,由于矩阵乘法的需要做$m$次初始化,所以只拿到了10分... 我们一 ...
- 1552: [Cerc2007]robotic sort
这道题用splay写 先离散化数据保证按题目所述顺序来写 按原序作为键值建树 维护区间最小值去跑 每次将i的位置 和 n的位置x和y找出来后 将x旋转到root y旋转到x的有儿子 这时y的左子树就是 ...
- 小白科普之JavaScript的DOM模型
微信公众号“前端大全”推送了一篇名为“通俗易懂的来讲讲DOM”的文章,把javascript原生DOM相关内容讲解的很详细.仔细读了一遍,觉得整理总结的不错,对自己也很使用,所以把内容整理过来,并根据 ...
- requests上传文件
""" requests上传文件时,如果文件名是中文,会导致上传失败,参考:https://www.cnblogs.com/liaofeifight/p/5807901. ...
- LeetCode 3 :Min Stack
今天做了一道MinStack的题,深深的感到自己C++还完全没有学好!!! #include <iostream> #include <stack> using std::st ...
- HDU1045(二分图经典建模)
Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- Flask应用部署
1. 介绍 前面介绍了<Linux下Nginx使用>, 但是Nginx是一个提供静态文件访问的web服务 首先我们介绍一下Web服务器, 应用服务器和应用框架的关系 客户端: 浏览器或者a ...
- CTP多点触摸协议【转】
转自:http://blog.chinaunix.net/uid-26403844-id-5063920.html linux kernel 2.6.30开始对多点触摸支持,最近高通要求所有CTP器件 ...
- Chrome扩展及应用开发
Chrome扩展及应用开发(电子书) http://www.ituring.com.cn/minibook/950 文档 官方 https://developer.chrome.com/extensi ...
- python multiprocessing多进程模块
原文:https://blog.csdn.net/CityzenOldwang/article/details/78584175 多进程 Multiprocessing 模块 multiprocess ...