<!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 主要用于侦听数据属性 单个属性
watch:{
//监听msg
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>