<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue_的监听属性</title>
 <script type="text/javascript" src="./js/vue.js"></script>
 <script type="text/javascript">
 window.onload = function(){
  var app= new Vue({
   el:"#app",
   data:{
    kilometers:0,
    meters:0
   },
   //监听属性
   watch:{
    kilometers:function(val){
     this.kilometers = val;
     this.meters = val * 1000;
    },
    meters:function(val){
     this.kilometers = val / 1000;
     this.meters.val;
    }
   }
  });
      
        var app1 = new Vue({
         el:"#app1",
   data:{
    seconds:0,
    minutes:0,
    hours:0
   },
   //监听属性
   watch:{
    seconds:function(val){
     this.seconds = val;
     this.minutes = val/60;
     this.hours=val/3600;
    },
    minutes:function(val){
     this.seconds = val*60;
     this.minutes =val;
     this.hours = val/60;
    },
    hours: function(val){
     this.seconds = val*3600;
     this.minutes = val *60;
     this.hours= val;
    }
   }
  });  
 }
 
 </script> 
</head>
<body>
 <div id='app'>
  千米：<input  type="text" v-model = "kilometers"/>
  米： <input type="text" v-model = "meters"/>
 </div>
 <br/> <br/>
 <div id='app1'>
 时：<input type="text" v-model = "hours">
 分：<input type="text" v-model ="minutes">
 秒：<input type="text" v-model ="seconds">
 </div>
 
</body>
</html>

vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换的更多相关文章

  1. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  2. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  3. Vue.js 监听属性

    demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

  4. 简单vue的监听属性(单位换算)

    单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. vue(七)--监听属性（watch）

    1.watch:用来监听每一个属性的变化 2.watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数不需要调用 3.当属性发生改变那么就会触发watch函数,每个函数都会 ...

  6. 怎样使用 Vue 的监听属性 watch ?

    需求: 我需要在某个数据变化时能够执行特定的动作, 比如我在输入框中输入数字 88, 系统检测到以后就会弹窗 拜拜 , 而输入其他字符则不会触发, 这种需求简直多入牛毛, 实际上这就是 自定义事件 , ...

  7. Vue.js：监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  8. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  9. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

随机推荐

  1. 几个js框架

    easyui适合做后端 bootstrap适合前端 layui 其实更偏向与后端开发人员使用,在服务端页面上有非常好的效果.

  2. 基础必备Linux操作

    求助 1. --help 指令的基本用法与选项介绍. 2. man man 是 manual 的缩写,将指令的具体信息显示出来. 3. info info 与 man 类似,但是 info 将文档分成 ...

  3. 「LibreOJ Round #6」花火

    转化思维的好题! 链接:here 大致题意: 有$ n$个数字,你每次可以交换相邻两个,还有一次交换任意两个元素的机会,求最少的交换次数使得这些数字升序排序(原数列两两不同) $ solotion:$ ...

  4. mkyaffs2image 生成不了120M的镜像文件的解决方法

    下载链接:   http://download.csdn.net/download/macrocrazier/3807761 用上述下载的链接会出现Failed to execute /linuxrc ...

  5. fastclick.js插件使用简单说明

    为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.     ...

  6. Nginx系列2：用Nginx搭建一个可用的静态资源Web服务器

    上一节中编译好自己的nginx服务器后, 现在要对nginx.conf文件进行配置,搭建一个可用的静态资源Web服务器 1.放入可访问的html文件到nginx文件夹下,如图1所示: 这里我放入的是一 ...

  7. 【转载】使用python库--Graphviz为论文画出漂亮的示意图

    原文: Drawing Graphs using Dot and Graphviz 1 License Copyright (C) 2013, 2014, 2015, 2016, 2017, 2018 ...

  8. 20165231 预备作业二：学习基础和C语言基础调查

    微信文章感想 读了娄老师微信公众号中的文章,老师给我们的启示首先就是要坚持,万事开头难,但是只要肯坚持就一定会有所成就,不管是学习还是生活方面.其中最有触动的就是减肥了,是我三四年来一直难以完成的目标 ...

  9. python3字典中items()和python2.x中iteritems()有什么不同？

    在Python2.x中: items() 用于返回一个字典的拷贝列表[Returns a copy of the list of all items (key/value pairs) in D],占 ...

  10. python3-深浅copy

    转载:https://www.cnblogs.com/ctztake/p/8194275.html 术语 变量:是一个系统表的元素,拥有指向对象的连接空间. 对象:被分配的一块内存,存储其所代表的值. ...