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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
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随机数生成代码与使用实例分析
2011/04/08 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
探讨如何把session存入数据库
2013/06/07 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python实现名片管理系统
2018/11/29 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
药品促销活动方案
2014/02/14 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
争先创优个人总结
2015/03/04 职场文书
人口与计划生育责任书
2015/05/09 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis