vue监听器

最新推荐文章于 2024-05-24 09:02:12 发布

小妳豆子

最新推荐文章于 2024-05-24 09:02:12 发布

阅读量203

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45719052/article/details/126195234

版权

vue监听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="app">
			<button @click="num++">{{num}}</button>
			<button @click="n.num++">{{n.num}}</button>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					num:5,
					n:{num:9}
				},
				
				//监听器  可以对当前实例的某一数据进行监听
				watch:{
					//方法中两个参数  一个变化后  一个变化前
					num:function(nval,oval){
						console.log(`nval:${nval}--oval:${oval}`)
					},
					//监听器的第二种用法
					n:{
						//handler函数固定写法
						handler(nval,oval){
							//对象只能监听变化后的数据
							console.log(`nval:${nval.num}--oval:${oval.num}`)	
						},
						//如果监听数据是个对象  需要加deep属性
						deep:true
						
					}
				}
			})
		</script>
	</body>
</html>