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>
  • 相关阅读:
    UVALive 7276 Wooden Signs
    hdu4291 A Short problem
    A
    hdu4686 Arc of Dream
    thinkphp5 模型的 更新操作
    thinkphp5 模型的 新增操作
    thinkphp 模型的创建
    thinkphp5 增删改查操作
    tp5 的查询构造器
    thinkphp5 数据库的原生查询
  • 原文地址:https://www.cnblogs.com/sunzhiqi/p/10077385.html
Copyright © 2011-2022 走看看