vue.js 监听属性的学习千米/米/ 时 /分/ 秒的转换

最新推荐文章于 2022-07-29 08:56:57 发布

aixun7508

最新推荐文章于 2022-07-29 08:56:57 发布

阅读量590

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/wh1109/p/10077419.html

版权

<!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(){

//建立vue对象
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>

谢谢各位点评。希望跟各位的一起讨论学习！可以评论留下联系方式！

转载于:https://www.cnblogs.com/wh1109/p/10077419.html