单位换算

单位换算可以根据实际情况换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js的监听属性</title>

    <script type="text/javascript" src='./js/vue.js'></script>

    <script type="text/javascript">

    window.onload = function(){

        //建立vue对象

        var app = new Vue({

            el:"#a",

            data:{

                kilometers:0,

                meters:0,

                decimetre:0

            },

            //监听属性开始

            watch:{

                kilometers:function(val){

                    this.kilometers = val;

                    this.decimetre = val * 10000;

                    this.meters = val * 1000;

                },

                meters:function(val){

                    this.kilometers = val / 1000;

                    this.decimetre = val * 10;

                    this.meters=val;

                },

                decimetre:function(val){

                    this.kilometers = val /10000;

                    this.meters = val / 10;

                    this.decimetre = val;

                }

            }

        });

    }

    </script>

</head>

<body>

    <div id="a">

    千米： <input type="text" v-model = "kilometers"/><br/>

    米：    <input type="text" v-model = "meters"/><br/>

    分米： <input type="text" v-model = "decimetre"/><br/>

    </div>

</body>

</html>

简单vue的监听属性(单位换算)的更多相关文章

  1. 9.Vue.js 监听属性

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

  2. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

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

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

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

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

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

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

  6. Vue.js 监听属性

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

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

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

  8. Vue.js：监听属性

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

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

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

随机推荐

  1. MQTT 协议学习：Retained（保留消息） 与 LWT（最后遗嘱）

    背景导入 让我们来看一下这个场景: 你有一个温度传感器,它每三个小时向一个 Topic 发布当前的温度.那么问题来了,有一个新的订阅者在它刚刚发布了当前温度之后订阅了这个主题,那么这个订阅端什么时候能 ...

  2. Exchange Server 2010邮件策略与遵从性

    本文档附带了一个附档,里面详细的描述了如何在Exchange Server 2010中配置如下内容: 1.邮件分类 2.免责申明 3.配置信息隔离墙 4.邮件审核 5.Exchange 2010与AD ...

  3. vSphere vSwitch网络属性配置详解

    1.安全 混杂模式:把vSwitch当成是一个hub,同一台交换机上面所有的虚拟机都能接受到二层数据包. MAC地址更改:当vSwitch上面连接的某一个虚拟机MAC地址发生更改时,vSwitch是否 ...

  4. Asp.net mvc项目分页功能

    1.定义一个分页用的Page<T>类 /* 使用示例: var pager = new Pager<Article>( this.ControllerContext, //上下 ...

  5. 计算机操作系统学习（一） Linux常用指令（随时更新）

    1.chmod 以下转载至https://blog.csdn.net/summer_sy/article/details/70142475 chmod u+x file.sh 就表示对当前目录下的fi ...

  6. python 求两个数的最大公约数

    给定两个整数a,b,求他们的最大公约数 def gcd(a,b): if a<b: a,b=b,a while(a%b != 0): c = a%b a=b b=c return b a,b = ...

  7. 微信小程序如何刷新当前界面

    在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...

  8. 082-PHP的do-while循环break跳出

    <?php $i = 1; do { echo $i; $i = $i + 1; if ($i >= 5) { echo "break<br>"; brea ...

  9. ubuntu12.04 安装完XRDP显示空白桌面

    先放链接:http://c-nergy.be/blog/?p=3518 在ubuntu软件中心搜索:fallback session,安装gnome-session-fallback: 在主文件夹(h ...

  10. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...