簡單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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM