Vue. 侦听器

最新推荐文章于 2024-05-11 14:36:51 发布

honey_xi

最新推荐文章于 2024-05-11 14:36:51 发布

阅读量226

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/honey_xi/article/details/105472852

版权

侦听器：监听数据变化的事件（数据改变触发一些事情，用侦听器监听数据的改变）

<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<ul>
				<li v-for="item in arr">{{item}}</li>
			</ul>
		</div>
		
		<!--watch:侦听数据变化的侦听函数-->
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					msg:"hello",
					arr:['小明','小红','小黑']
				},
				watch:{
					msg:function(val){
						console.log("监听事件---msg")
						console.log(val)
					},
					arr:function(val){
						console.log("监听事件---arr")
						console.log(val)
					}
				}
			})
		</script>
	</body>

可以在浏览器控制台内修改msg的值，来触发监听事件（watch）。修改完之后才被监听到。尽量少用监听（watch），以防性能降低。

在控制台给arr添加小王，app.arr.push('小王')，修改完成后，则触发监听事件watch，在控制台显示【监听事件---arr】。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

honey_xi

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue. 侦听器

侦听器：监听数据变化的事件（数据改变触发一些事情，用侦听器监听数据的改变）<body> <div id="app"> <h1>{{msg}}</h1> <ul> <li v-for="item in arr">{{item}}</li> </ul> </div&...
复制链接

扫一扫