侦听器watch
<div id="app">
<input type="text" v-model="msg">
<h3>{{msg}}</h3>
<br>
<h3>{{stus[0].name}}</h3>
<button @click='stus[0].name = "Tom"'>改变</button>
</div>
<script>
// 基本的数据类型可以使用watch直接监听,复杂数据类型object、array需要深度监听
new Vue({
el: '#app',
data: {
msg: '',
stus: [{
name: 'jack'
}]
},
watch: {
//key是属于data对象的属性名,value:是监听后的行为 newV表示新值,oldV是旧值
'msg': function(newV, oldV) {
console.log(newV, oldV);
if (newV === '100') {
console.log('hello');
}
},
//深度监听:监听object/array
'stus': {
deep: 'true',
handler: function(newV, oldV) {
console.log(newV[0].name);
}
}
},
})
</script>