# 一、监听属性
我们在工作中常常需要监听某一个属性值的变化，这个时候我们就需要用到了监听属性
watch
# 1.1 基础版监听
场景如下：输入框输入你的年龄，如果年龄在0-15岁提示信息：你还是个小孩，如果年龄在 15-25岁，提示信息：你已经是个少年，如果年龄在25岁以上，提示信息：你已经长大了
<template>
<div id="app">
年齡：<input type="number" v-model="age"><br>
提示信息：<span>{{infoMsg}}</span>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
infoMsg:""
}
},
watch:{
age:function(val,oldval){
if(val>0 && val<15){
this.infoMsg="你还是个小孩"
}else if(val>15 && val<25){
this.infoMsg="你已经是个少年"
}else{
this.infoMsg="你已经长大了"
}
}
}
}
</script>
@前端进阶之旅: 代码已经复制到剪贴板
# 1.2 进阶版监听
下面我们改变一下需求：基础规则不变，但是因为后台数据库的更改,我们需要提交一个这样的数据结构
data() {
return {
info: {
age: ""
},
infoMsg: ""
};
}
@前端进阶之旅: 代码已经复制到剪贴板
- 由于我们监听的是对象
info中的属性age值的变化，所以我们需要使用到的是深度监听，具体代码如下
