Vue.js 监听属性
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="watch">
分钟：<input type="text" v-model="minutes">
小时：<input type="text" v-model="hours">
</div>
<p id="show"></p>
<script>
var vm= new Vue({
el:'#watch',
data: {
minutes: 0,
hours: 0
},
watch:
{
minutes:function(value) {
this.minutes=value;
this.hours=value/60;
},
hours:function(value) {
this.minutes=value*60;
this.hours=value;
}
} });
vm.$watch('hours', function (newValue, oldValue) {
// 这个回调将在 vm.hours 改变后调用
document.getElementById ("show").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
</body>
</html>
效果：
2018-03-19 23:51:19
Vue.js 监听属性的更多相关文章
- 9.Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- 简单vue的监听属性(单位换算)
单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- vue(七)--监听属性（watch）
1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...
- 怎样使用 Vue 的监听属性 watch ?
需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , ...
- Vue.js：监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
- 设计模式(5): vue 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
随机推荐
- python之将Unicode文本标准化
在需要比较字符串的程序中使用字符的多种表示会产生问题. 为了修正这个问题,你可以使用unicodedata模块先将文本标准化: s1 = 'Spicy Jalape\u00f1o' s2 = 'Spi ...
- 使用JMail发送邮件
使用JMail做最简单的文本邮件发送: 第一步.下载JMail和JAF 第二步.解压放到本地classpath中 第三步.使用: public class MailService{ privat ...
- 在MyEclipse中更换或修改svn的用户名和密码
1.通过删除SVN客户端的账号配置文件 (1)找到我们使用的客户端配置文件,Windows XP中的位置是在系统盘的Documents and Settings\Administrator\A ...
- UICollectionView中的cell包含UIScrollview
需求:在scrollview的子View不为0,当scrollview的展示的index不为0且向右滑动CollectionView.CollectionView不滑动Cell,而是让scrollvi ...
- 【记录】API Gateway作用？ 与过滤器的区别？Nginx与Zuul区别？
网关(gateway)的作用: 网关可以拦截客户端所有请求,对该请求进行权限控制.负载均衡.日志管理.接口调用监控等 过滤器与网关的区别是什么? 过滤器是拦截单个tomcat服务器请求. 网关是拦截整 ...
- ubuntu批量转换所有子文件夹下图片文件格式
第一步按照 sudo apt-get install imagemagick 对于一个文件,可以: convert ubuntuhandbook.png ubuntuhandbook.jpg 对于多个 ...
- eclipse Tomcat8.0端口占用报错和发布路径修改
实际上我是eclipse莫名其妙调试时崩了,结果再启动也无法启动tomcat报端口占用错 修改server.xml里的端口号不是好方法,改完运行报 “ 对不起! 这里不是Web服务器” 后来研究发 ...
- Centos7命令行安装Tomcat以及配置防火墙开放端口
[转载]Centos 7 yum安装tomcat 命令: 系统环境CentOS Linux release 7.2.1511 (Core) 一.搭建准备:1.先到tomcat官网https://tom ...
- Python内部变量与外部变量
def outer(): x = 'outer x' def inner(): x = 'inner x' print(x) inner() print(x) # 这里的`x`与`x = 'outer ...
- HBase自定义MapReduce
HBase表数据的转移 在Hadoop阶段,我们编写的MR任务分别进程了Mapper和Reducer两个类,而在HBase中我们需要继承的是TableMapper和TableReducer两个类. 目 ...