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 不监听绑定的变量
概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...
随机推荐
- Cas 4.2.7 OAuth+Rest 实现SSO
关于Cas的认证原理.Rest的使用请参考前面的文章.本文重点阐述使用Rest接口登陆系统和其他单点登录系统打通遇到的问题,及解决问题的思路和过程. 一: 遇到的问题 使用Res ...
- 在egg中配置cors
在egg中配置 cors(跨域) 第一步,安装 egg-cors npm i egg-cors --save 第二步,配置 cors 在config/plugin.js文件下添加: exports.c ...
- shell egrep 引号
[jg73178@hdcgcgdbsla01dv ~]$ egrep \'SI\' tt.txt 'SI' [jg73178@hdcgcgdbsla01dv ~]$ egrep \"SI\& ...
- 【sql】leetcode习题 (共 42 题)
[175]Combine Two Tables (2018年11月23日,开始集中review基础) Table: Person +-------------+---------+ | Column ...
- spring 新建mybatis ...
一. 创建bean类 package com.feilong.blog.dao; public class Message { private int id; private String autho ...
- Laravel5.5添加新路由文件并制定规则
Laravel5.5里面有4个默认的路由文件,其中web.php是默认路由文件,如果需要添加其他路由文件,按照以下步骤进行. 此处以添加网站home前端路由举例,我已经先在/app/Http/Cont ...
- 【leetcode】538. Convert BST to Greater Tree
题目如下: Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the orig ...
- MySQL常用操作2
MySQL常用操作2 判断函数 IF(expr, value1, value2) -- 如果表达式expr为true,则返回value1,否则返回value2 IFNULL(value1, val ...
- linux IPC的信号量
信号量相关函数原型 获得一个信号量ID #include <sys/types.h> #include <sys/ipc.h> #include <sys/sem.h&g ...
- tarjan求强联通分量
tarjan求强联通分量 变量含义说明: pre[i]:i点的被访问的时钟编号,被分配后保持不变 low[i]:i点能访问的最先的点的时钟编号,随子节点改变 scc_no[i]:i点所在的强联通分量的 ...