单位换算可以根据实际情况换
<!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>
