vue+element 学习之路（八）watch 深度监听

最新推荐文章于 2024-09-03 14:06:45 发布

倔强的啊强

最新推荐文章于 2024-09-03 14:06:45 发布

阅读量5.3k

点赞数

本文链接：https://blog.csdn.net/weixin_39327044/article/details/89680713

版权

本文介绍了在Vue中利用watch的深度监听(deep:true)实现验证码功能的需求，包括手机号码格式验证和60s倒计时。在手机号码输入正确后启用获取验证码按钮，点击后按钮进入倒计时并禁用，倒计时结束恢复原状。文章讨论了watch的使用细节以及代码实现，并表达了对优化方案的期待。

摘要由CSDN通过智能技术生成

在这里插入图片描述
今天在做验证码功能需求的时候接触到了Vue中的 watch监听方法，它可以用来监听vue实例上的数据变动。

需求场景：
1.一开始‘’获取验证码‘’按钮默认为禁用状态，当用户输入了正确的手机号码格式后，按钮恢复可用状态。
2.点击获取验证码按钮之后，按钮中文本变为60s的倒计时，同时手机号码输入框与按钮为禁用状态，当倒计时结束后恢复可用状态。

需求1思路：
1.首先先给手机号码输入框telphone设定校验规则
在这里插入图片描述
2.绑定按钮的disabled

3.设定watch监听，deep:true 设置深度监听当telphone值发生变化时触发handler方法
注意：这里的function不能写成箭头函数，不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch

handler函数中的意思就是每次telphone中数值发生变化时，都对其进行格式校验一次，当格式正确是，按钮恢复使用，非常好理解。
在这里插入图片描述
需求2思路：
当用户点击发送验证码按钮时，变更按钮中的文本并同时执行一个倒计时方法。
目的是为了防止用户请求次数过多，设定一分钟只能请求一次验证码。

当倒计时结束，按钮文本被换回‘获取验证码’ 并且手机号码输入框与获取验证码按钮恢复使用。

源码：

<template>
    <div>
        <el-form :model="user" :rules="rules" ref="user">
            <el-form-item prop="telphone">
                <el-input placeholder="请输入手机号码" v-model="user.telphone" :disabled="teldisabled">

                </el-input>
            </el-form-item>
            <el-form-item prop="yzm">
                <el-row :gutter="5">
                    <el-col :span="16">
                         <el-input placeholder="验证码" v-model="user.yzm">

                        </el-input>
                    </el-col