watch监听表单表单内容是否变更
时间: 2023-06-29 14:03:13 浏览: 60
可以使用Vue.js提供的`watch`方法来监听表单内容是否变更。具体操作如下:
1. 在Vue实例中定义一个`data`属性,用于保存表单数据。
```javascript
data() {
return {
formData: {
name: '',
age: '',
email: ''
}
}
}
```
2. 在模板中绑定表单元素,并使用`v-model`指令将表单元素与`formData`中的相应属性绑定起来。
```html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" v-model="formData.name">
<label for="age">年龄:</label>
<input type="number" id="age" v-model="formData.age">
<label for="email">邮箱:</label>
<input type="email" id="email" v-model="formData.email">
</form>
```
3. 使用`watch`方法监听`formData`中的属性变化。当任意一个属性发生变化时,执行相应的回调函数。
```javascript
watch: {
formData: {
handler(newVal, oldVal) {
console.log('formData changed', newVal, oldVal)
// 执行表单内容变更后的逻辑
},
deep: true
}
}
```
通过以上操作,就可以实现对表单内容变更的监听。当表单内容发生变化时,就会触发`watch`方法中的回调函数,从而可以执行相应的逻辑。