2、监视watch

最新推荐文章于 2024-05-27 10:46:12 发布

hudongdongjava

最新推荐文章于 2024-05-27 10:46:12 发布

阅读量83

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/u012153127/article/details/111032625

版权

vue学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

监视属性

通过watch属性可以监视指定变量的变化

<body>
		<div id="app">
			<div v-bind:title="message">{{message}}</div>
		</div>
		<script>
			var data = {
				message:"hello vue"
			};
			
			var vue = new Vue({
				el:"#app",
				data:data,
				//监听属性
				watch:{
					"message":function(newValue, oldValue) {
						console.log("newValue = " + newValue + ", oldValue = " + oldValue);
					}
				}
			});
			
			setTimeout(function() {
				vue.message = 'update';
			}, 5000);
		</script>
	</body>

还可以通过vue.$watch来监视变量

<body>
		<div id="app">
			<div v-bind:title="message">{{message}}</div>
		</div>
		<script>
			var data = {
				message:"hello vue"
			};
			
			var vue = new Vue({
				el:"#app",
				data:data
				//监听属性
				// watch:{
				// 	"message":function(newValue, oldValue) {
				// 		console.log("newValue = " + newValue + ", oldValue = " + oldValue);
				// 	}
				// }
			});
			
			//也可以通过vue.$watch
			vue.$watch("message", function(newValue, oldValue) {
				console.log("newValue = " + newValue + ", oldValue = " + oldValue);
			});
			setTimeout(function() {
				vue.message = 'update';
			}, 5000);
		</script>
	</body>

hudongdongjava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2、监视watch

监视属性通过watch属性可以监视指定变量的变化<body> <div id="app"> <div v-bind:title="message">{{message}}</div> </div> <script> var data = { message:"hello vue" }; var vue = new Vue({ el:"#app", data:data
复制链接

扫一扫

专栏目录