vue指令只能输入正数并且只能输入一个小数点的方法


Posted in Javascript onJune 08, 2018

最近在做一个金额查询,验证的时候总是出现很多问题,如输入-号后,input框里是没有了,但是在model里还是绑定了,提交的时候就会报错,真的是让人很是郁闷,小数点也是input框过滤掉了,但是提交的时候也会出现。不过经过努力终于找到了一种解决方案,在这里``和大家分享一下下。

Vue.directive('numbers', {
 bind: function (el, binding) {
  console.log('ere')
 },
 inserted: function (el) {
  // el.querySelector('input').blur(console.log('etset'))
 },
 update: function (el, binding, vnode, oldVnode) {
  console.log('vnode', vnode)
  let express = vnode.data.directives[1].expression
  // let value = el.querySelector('input').value
  let value = vnode.data.directives[1].value
  if (typeof value === 'string') {} //在重置的时候清空
  if (value.split('.').length - 1 > 1) {
   value = value.replace(/\.{2,}/g, '') // 只保留第一个. 清除多余的
   value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
  }
  let repeatValue = value.replace(/[^\d.]/g, '')
  // setTimeout(() => {
  //  el.querySelector('input').value = repeatValue
  // }, 5)
  setValueWithExpressionVue(vnode.context.$data, express, repeatValue)
 },
 componentUpdated: function () {},
 unbind: function (el) {}
})

// 
function setValueWithExpressionVue (currObj, expression, value) {
 expression = expression.split('.')
 expression.forEach(function (arg, i) {
  if (i < expression.length - 1) {
   currObj = currObj[arg]
  } else {
   currObj[arg] = value
  }
 })
}

放到main.js里就好了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 #Javascript
原生实现一个react-redux的代码示例
Jun 08 #Javascript
vue项目中使用百度地图的方法
Jun 08 #Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 #Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 #Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 #Javascript
You might like
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
webpack多页面开发实践
2017/12/18 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python迭代器的使用方法实例
2013/11/21 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python实现简易云音乐播放器
2018/01/04 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python logging设置和logger解析
2019/08/28 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Python中and和or如何使用
2020/05/28 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
应届毕业生如何写求职信
2014/02/16 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
python基础之文件处理知识总结
2021/05/23 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
一行Python命令实现批量加水印
2022/04/07 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js