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实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
基于jquery编写分页插件
Mar 07 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
AngularJS实现多级下拉框
Mar 25 Javascript
js作用域及作用域链工作引擎
Jul 07 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php简单分页类实现方法
2015/02/26 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
使用正则替换变量
2007/05/05 Javascript
js select常用操作控制代码
2010/03/16 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python读取Excel实例详解
2018/08/17 Python
详解Python传入参数的几种方法
2019/05/16 Python
django配置app中的静态文件步骤
2020/03/27 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
自荐信怎么写好
2013/11/11 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS