13.侦听属性 ---(vue入门 文档学习记录)

侦听属性

先看下面的例子:

<div id="computed_props">
			千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
		</div>
		<script>
			var vm = new Vue({
				el: '#computed_props',
				data: {
					kilometers: 1,
					meters: 0
				},
				methods: {},
				computed: {},
				watch: {
					kilometers: function(val) {
						this.kilometers = val;
						this.meters = val * 1000;
					},
					meters: function(val) {
						this.kilometers = val / 1000;
						this.meters = val;
						console.log(vm.meters)
					}
				}
			});
			

我们可以看到:直接改变源码中kilometers的值watch是不起作用的,一旦页面上开始修改,则watch开始工作,这就表明watch第一次不执行.
思考:
怎样使watch第一次也执行呢?找了一些文章觉得挺好,可以去看一下,通过绑定handle即可.https://blog.csdn.net/m0_37970699/article/details/94742994

标签：13,vue,computed,val,watch,vm,meters,kilometers,文档
来源： https://blog.csdn.net/m0_37970699/article/details/94743443