Vue之watch监听属性

ZJMing_sir

于 2021-03-15 16:14:37 发布

阅读量112

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/zjming_sir/article/details/114838096

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue之watch监听属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div">
			KM:<input type="" name="" id="" value="" v-model="km" />
			M:<input type="" name="" id="" value="" v-model="m" />
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#div',
			data: {
				km: 0,
				m: 0,
			},
			watch: {
			km: function(val) {
					this.km = val;
					this.m = val * 1000;
				},
				m: function(val) {
					this.km = val / 1000;
					this.m = val;
				}
			}
		})
	</script>
</html>