简单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>
