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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
小程序实现授权登陆的解决方案
Dec 02 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/11/28 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
理解python中生成器用法
2017/12/20 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
tensorflow如何批量读取图片
2019/08/29 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
电子专业毕业生自荐信
2014/05/25 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
矛盾论读书笔记
2015/06/29 职场文书
四则混合运算教学反思
2016/02/23 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
MySQL慢查询的坑
2021/04/28 MySQL
Windows server 2016服务器基本设置
2022/08/14 Servers
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL