zoukankan      html  css  js  c++  java
  • vue.js 监听属性的学习 千米/米/ 时 /分/ 秒的转换

    <!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(){

    //建立vue对象
    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>

    谢谢各位点评。希望跟各位的一起讨论学习!可以评论留下联系方式!

  • 相关阅读:
    Java API之时间、异常和集合
    JAVA API 之包装类、数学类和 Calendar 类
    regular expression ---正则表达式 --- REGEX 的一些补充
    正则表达式
    JavaScript 的一些应用场景分析
    JavaScript 简介
    ERROR internal error: process exited while connecting to monitor
    常用服务默认端口号
    shell笔记
    php登录注册
  • 原文地址:https://www.cnblogs.com/wh1109/p/10077419.html
Copyright © 2011-2022 走看看