zoukankan      html  css  js  c++  java
  • 简单vue的监听属性(单位换算)

    单位换算

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

    <!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>
  • 相关阅读:
    Day3学习笔记
    Day2学习笔记
    Day1学习笔记
    中文标识
    about original idea
    那些和matlab有关的
    GRE Sub math 报名
    虽然实际没有什么用,但是可能会有理论上的意义吧
    latex相关
    对venturelli theorem的重新认识
  • 原文地址:https://www.cnblogs.com/sunzhiqi/p/10077385.html
Copyright © 2011-2022 走看看