51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

vue深度监听

放纵自己的欲望是最大的祸害;谈论别人的隐私是最大的罪恶;不知自己的过失是最大的病痛------亚里士多德

我们有时使用vuewatch,可能要对一个对象的多个属性进行监听

这样我们就可以使用深度监听

|------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | hljs vue <template> <view> </view> </template> <script> // 11位手机号码正则 const REGEXP_TEL = /^((1[3,5,8,7,9,6][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/; export default { data() { return { // 表单数据存储 formData: { username: '', password: '' } }; }, watch: { formData: { handler: 'cutValue', deep: true } }, methods: { // 监听formData cutValue() { console.log(this.formData); } } }; </script> <style scoped> </style> |

当我们的formData.username或者formData.password发生变化时,就会调用cutValue函数,打印我们的formData

赞(0)
未经允许不得转载:工具盒子 » vue深度监听