vue2之简易的pc端短信验证码的问题及处理方法

<提示语部分不要在意（非重点部分）>

简单说下布局(采用的是 vue的element ui的ui框架 )进行布局操作的

子组件模板部分如下（code部分是很基础的）

子组件逻辑部分如下（code部分是很基础的）

在@/utils/validate.js中的使用正则代码

// 验证手机号码
export const validatPhone = /^(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
//验证密码
export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/

子组件逻辑部分如下（code部分是很基础的）

父组件中的模板部分

为什么需要使用set这个api方法呢

如下截图

可以学习下这个链接的使用set的例子

全局变量globals.js文件

[vue-set]的文档( cn.vuejs.org/v2/api/#Vue… )

说明（*****向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。）

export default {
 //判断是否点击了
 isChick(data,key='disabled',count=0){
  data[key] =true
  if(count<=0){
   data[key] =false
  }
 },
 //此处是重点 使用的vue官网给的api方法
 [vue-set](https://cn.vuejs.org/v2/api/#Vue-set)
 sendCode(self,name,k,v){
  self.$set(name,k,v)
 }
}

父组件中的逻辑部分

总结

以上所述是小编给大家介绍的vue2之简易的pc端短信验证码的问题及处理方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！