单位换算

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

<!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. java.lang.IllegalStateException: Active Spring transaction synchronization or active JTA transaction with specified [javax.transaction.TransactionManager] required

    错误信息: java.lang.IllegalStateException: Active Spring transaction synchronization or active JTA trans ...

  2. ucosiii 移植

    最近想在 f429 上面使用 mdk526 版本的 IDE,配合 HAL 和ucosiii.考虑到的方法是对比 v7 开发板的 ucosiii 和裸机程序,找出需要修改的地方,然后对比 v6 开发板的 ...

  3. Phoenix5.0的部署

    官网下载编译好的二进制包 http://phoenix.apache.org/download.html2 上传并解压到指定目录, 再修改目录名称 tar -zxvf apache-phoenix-5 ...

  4. 提升Windows系统舒适度软件

    1.Geek Uninstaller 卸载软件 2.PotPlayer 无广告播放器

  5. python——字符输出ASCII码

    总是忘记事,赶紧记下来,Python字符转成ASCII需要用到一个函数ord # 用户输入字符 ch = input("请输入一个字符: ") # 用户输入ASCII码,并将输入的 ...

  6. ping不通www.baidu.com，但可以访问www.baidu.com网页

    https://blog.csdn.net/stpeace/article/details/45116425 了解网络的人, 基本上都用过ping命令, 这个优秀的小工具通常能非常靠谱地检测网络的连通 ...

  7. HDU - 1698 Just a Hook （线段树---区间修改）

    题意:n个棍子,初始值全为1,给定Q个区间,分别赋值,问n个棍子的总值. 分析:lazy标记主要体现在update上. 当l <= L && R <= r时,该结点的子结点 ...

  8. C++ Socket WSAENOBUFS WSAoverlapped

    WSARecv的时候,投递的接收缓冲区的大小设置为0. 然后手动调用非阻塞recv从缓冲区接受数据,直到WSAEWOULDBLOCK,不然会有很多的buffer被锁住,当客户端的数量达到一定数目时,就 ...

  9. 重采样Resample 的一些研究记录。

    最近项目有需要重采样算法,先找了一下,主流的就是几个开源算法,Speex / Opus / ffmpeg / sox 1.最早的事Speex,算法源自CCRMA(Center for Computer ...

  10. JS - 获取任意一天的0点和23:59:59时间

    转载自 https://www.cnblogs.com/sk-3/archive/2019/07/23/11232750.html 使用了setHours() 方法 setHours() 方法用于设置 ...