12、Vue-监听器watch

行走的皮卡丘

已于 2022-05-30 09:56:28 修改

阅读量343

点赞数 21

分类专栏： Vue学习基础文章标签： vue js html javascript

于 2020-08-07 10:14:16 首次发布

本文链接：https://blog.csdn.net/weixin_44908159/article/details/107831480

版权

Vue学习基础专栏收录该内容

27 篇文章 11 订阅

订阅专栏

在这里插入图片描述

12 Vue-监听器watch

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
        
		<title>行找的皮卡丘</title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg">
			<h3>{{msg}}</h3>
			
			<!--点击按钮重新给name赋值-->
			<button @click="stus[0].name='henry'">改变</button>
			<h4>{{stus[0].name}}</h4>	
		</div>
	</body>
    
	<script type="text/javascript" src="js/vue.min.js">

	</script>
	<script type="text/javascript">
		// watch-->监听的是单个属性 基本的数据类型
		// 基本的数据类型  简单监视
		// 复杂的数据类型  深度监视
 
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "",
					stus:[{"name":"Lz12Code"}],
				}
			},
			// 监听msg
			watch: {
				msg: function(newV, oldV) {
					// newV(新值)    oldV(老值)
					console.log(newV, oldV);
					// 如果输入的值满足某一条件则进行下步处理
					if (newV === 'hello') {
						console.log("你输入了hello")
					}
				},
				// 对于复杂的数据类型的用深度监听
				stus:{
					// 对于复杂类型的深度监视 object array
					deep:true,
					handler:function(newV,oldV){
						console.log(newV)
					}
				}
			}
		})
	</script>
</html>