VUE 学习（五）监听属性watch

最新推荐文章于 2022-11-29 10:00:53 发布

豆皮没有豆

最新推荐文章于 2022-11-29 10:00:53 发布

阅读量466

点赞数

分类专栏： HTML+CSS+SVG+VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_43434300/article/details/108239007

版权

HTML+CSS+SVG+VUE 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue监听属性watch</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		 <!--监听属性 watch，我们可以通过 watch 来响应数据的变化。
		以下实例通过使用 watch 实现计数器：-->
		<div id="div1">
			<p style="font-size: 25px;">计数器：{{counter}}</p>
			<button @click="counter++" style="font-size: 25px;">点我</button>
		</div>
		<br /><br />
		
		
		<!--以下实例进行千米与米之间的换算：-->
		<div id="div2">
			千米：<input type="text" v-model="kilometers" />
			米：	<input type="text" v-model="meters" />
		</div>
		<p id="info"></p>
		<!--以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。
		当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。-->
		<script>
			var vm=new Vue({
				el:'#div1',
				data:{
					counter:1
				}
			});
			vm.$watch('counter',function(nval,oval){
				alert('计数器值的变化：'+oval+'变为'+nval+'!');
			});
			
			var vu=new Vue({
				el:'#div2',
				data:{
					kilometers:0,
					meters:0
				},
				methods:{
				},
				computed:{
				},
				watch:{
					kilometers:function(val){
						this.kilometers=val;
						this.meters=this.kilometers*1000;
					},
					meters:function(val){
						this.kilometers=val/1000;
						this.meters=val;
					}
				}
			});
			// $watch 是一个实例方法
			vu.$watch('kilometers',function(newValue,oldValue){
				// 这个回调将在 vu.kilometers 改变后调用
				document.getElementById('info').innerHTML='修改前值为：'+oldValue+'，修改后值为：'+newValue;
			});
		</script>
	</body>
</html>

豆皮没有豆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE 学习（五）监听属性watch

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue监听属性watch</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <!--监听属性 w.
复制链接

扫一扫