Vue.js学习笔记（七）--------监听属性

原创于 2018-08-13 17:22:35 发布 · 516 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #监听属性

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

Vue.js

16 篇文章

订阅专栏

本文介绍Vue中使用watch监听属性变化的方法，并通过一个货币换算的例子详细展示了如何实现双向数据绑定及实时更新计算结果。

监听属性

watch的用法：

vue可以通过watch来监听属性值的变化。

效果图：

代码：

<div id="div1">
		人民币：<input type="number" v-model.number="rmb"><br>
		汇率：<input type="number" v-model.number="huilv"><br>
		换算后：<input type="number" v-model.number="huansuan">
	</div>
	
	<script>
		new Vue({
			el:"#div1",
			data:{
				rmb:0,
				huilv:6.6,
				huansuan:0,
			},
			watch:{
				rmb:function(){
//					this.rmb=val;
					this.huansuan=this.rmb/this.huilv;
				},
				huansuan:function(){
					this.rmb=this.huansuan*this.huilv;
				},
				huilv:function(){
					this.huansuan=this.rmb/this.huilv;
					this.rmb=this.huansuan*this.huilv;
				}
			}
		})
	</script>