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.js中$watch的用法示例的更多相关文章
- VUE -- vue.js中$watch的用法示例
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...
- Vue.js 作用域、slot用法(单个slot、具名slot)
作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...
- Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
- Vue.js中ref ($refs)用法举例总结
原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type=& ...
- Vue.js几个简单用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue.js+vue-router+webpack keep-alive用法
本文是机遇 提纲: 现有需求 各个解决方案的优缺点 相关的问题延伸 keep-alive使用详解 现有需求 每个项目中都存在许多列表数据展示页面,而且通常包含一些筛选条件以及分页. 并 ...
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
- Vue.js用法详解(一)更新中~
前 言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: Vue.js ...
随机推荐
- Phoenix中的timestamp字段查询以及timestamp的比较查询
1 查询语法 SELECT TO_CHAR(createtime, 'yyyy-MM-dd HH:mm:ss') FROM USER 2 需要比较timestamp的语法查询 select * fro ...
- Atmel芯片使用
ATMEL系列芯片 9X35 9G35可pin-to-pin替代9G10,具体需核对.此外即使pin-to-pin替代,外部应用也不一样. A5D2处理器,可支持linux/andriod. M7(M ...
- from表单中 action的后面"" 内如果是 servlet的虚拟路径的话
<form action="login" method="post"> ====================================== ...
- Hadoop_03_Hadoop分布式集群搭建
一:Hadoop集群简介: Hadoop 集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起: HDFS集群:负责海量数据的存储,集群中的角色主要有: NameNo ...
- linux-Redhat7 windows物理机与虚拟机设置共享目录
一 windows物理机与虚拟机设置共享目录 1.1 WMware Workstation点击重新安装WMware Tools 此时会弹出在客户机装载 ...
- linux常用查看命令
一般查看 cat -n 文件名 n 代表显示行号 分页查看 more 文件名 more -50 文件名 -50 代表一页显示50行 向下翻页 空格 向上翻页 b more +/搜索值 文件名 查找文 ...
- 将本地代码使用Git上传更新至Github
注册.配置git 1. 首先注册git image 2.然后下载.配置git 百度“git下载”,然后默认安装,注意的是最后要添加环境变量,最后安装结果如下: image 配置如下: 1.设置本地的s ...
- java poi 读取excel内容
import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Row; import or ...
- CSS基础学习-6.CSS属性_列表、表格
- Spring前置方法无法阻止原方法执行(转)
在前置方法用return的方法无法阻止原方法的执行. 该处的return 只是结束了目标方法执行前的检验方法而已,而不是结束目标方法. 使用抛异常的方式程序终止. 环绕通知可以阻止原方法的执行, pu ...