简单实现手机号银行卡的同步显示功能

简单实现手机号银行卡的同步显示功能

这是某盟的一道面试题
难道不都是只要有了清晰的思路后边写边优化么
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值
处理focus和blur事件即可
非要手写,手写根本写不出啊,然后面试官就认为我不会 无语了

要求如下

  1. 输入框输入内容数据长度大于0,展示出预览信息
  2. 光标离开关闭预览信息
  3. 预览信息每隔4位插入一个特殊字符_,输入内容不变

就是用计算属性判断即可





如果再加入个长度限制,则以上方法就不合适了,更换实现方案
v-model其实是个语法糖
分开写为v-bind:valuev-on:input



限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup

那就在keydown时处理呗,但是keydown修改evt.target.value
handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用
必须要在handerInput时处理



你可能感兴趣的:(vue.js)