vue.js 監聽屬性的學習/ 千米、米的轉換 /時、分、秒 的轉換
阿新 • • 發佈:2018-12-06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue_的監聽屬性</title>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var app= new Vue({
el:"#app",
data:{
kilometers:0,
meters:0
}, //監聽屬性
watch:{
kilometers:function(val){
this.kilometers = val;
this.meters = val * 1000; },
meters:function(val){
this.kilometers = val / 1000;
this.meters.val; }
}
});
var app1 = new Vue({
el:"#app1",
data:{
seconds:0,
minutes:0,
hours:0
},
//監聽屬性
watch:{
seconds:function(val){
this.seconds = val;
this.minutes = val/60;
this.hours=val/3600;
}, minutes:function(val){
this.seconds = val*60;
this.minutes =val;
this.hours = val/60;
}, hours: function(val){
this.seconds = val*3600;
this.minutes = val *60;
this.hours= val;
}
}
});
} </script>
</head>
<body>
<div id='app'>
千米:<input type="text" v-model = "kilometers"/>
米: <input type="text" v-model = "meters"/> </div>
<br/> <br/>
<div id='app1'>
時:<input type="text" v-model = "hours">
分:<input type="text" v-model ="minutes">
秒:<input type="text" v-model ="seconds">
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue_的監聽屬性</title>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var app= new Vue({
el:"#app",
data:{
kilometers:0,
meters:0
}, //監聽屬性
watch:{
kilometers:function(val){
this.kilometers = val;
this.meters = val * 1000; },
meters:function(val){
this.kilometers = val / 1000;
this.meters.val; }
}
});
var app1 = new Vue({
el:"#app1",
data:{
seconds:0,
minutes:0,
hours:0
},
//監聽屬性
watch:{
seconds:function(val){
this.seconds = val;
this.minutes = val/60;
this.hours=val/3600;
}, minutes:function(val){
this.seconds = val*60;
this.minutes =val;
this.hours = val/60;
}, hours: function(val){
this.seconds = val*3600;
this.minutes = val *60;
this.hours= val;
}
}
});
} </script>
</head>
<body>
<div id='app'>
千米:<input type="text" v-model = "kilometers"/>
米: <input type="text" v-model = "meters"/> </div>
<br/> <br/>
<div id='app1'>
時:<input type="text" v-model = "hours">
分:<input type="text" v-model ="minutes">
秒:<input type="text" v-model ="seconds">
</div>
</body>
</html>