javascript-jquery/07-wacth.html at master · KenNaNa/javascript-jquery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app">
		<input type="text" name="" v-model = 'msg'>
		<h3>{{msg}}</h3>
		<button @click = 'stus[0].name = "rose"'>改变</button>
		<h4>{{stus[0].name}}</h4>
	</div>
	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">


		new Vue({
			el:'#app',
			data:function() {
				return {
					msg:'',
					stus:[{name:'jack'}]
				}
			},
			watch:{
				msg:function(newV,oldV){

					// console.log(newV,oldV);

					if (newV ==='tusir') {
						console.log('tusir 出来了');
					}
				},
				// 监听复杂数据类型  object array 深度监视
				stus:{
					deep:true,//深度监视
					handler:function(newV,oldV) {
						console.log(newV[0].name);
					}
				}

			}
		});
	</script>


</body>
</html>