vue数字类型过滤器的示例代码


Posted in Javascript onSeptember 07, 2017

需求 只能输入数字

输入字母和特殊字符自动过滤掉

输入完成失焦自动加.00 如果输入了小数自动四舍五入为22.22类似这样格式

效果图

vue数字类型过滤器的示例代码

可以使用在普通js和angular里面,vue 直接调用

先上调用的函数

/**
 * User: sheyude
 * Date: 2017/9/4 0004
 * Time: 上午 10:51
 *
 */
let number = {
  twoWay: true,
    bind:function (el) {
  el.addEventListener('blur',function () {
    // let value = formatNumber(el.value,2,0)
    let value

    (function(){
      value = formatNumber(el.value,2,0)
      return value
    })()
    el.value =value
  })
},
  update:function (el,binding,vnode) {
    if(el.value !== ''){
      el.value = el.value.replace(/[^0-9.]+/g, '');
    }
  }
}

/**
 * 将数值四舍五入后格式化.
 * @param num 数值(Number或者String)
 * @param cent 要保留的小数位(Number)
 * @param isThousand 是否需要千分位 0:不需要,1:需要(数值类型);
 * @return 格式的字符串,如'1,234,567.45'
 * @type String
 */
function formatNumber(num,cent,isThousand) {
  num = num.toString().replace(/\$|\,/g,'');

  // 检查传入数值为数值类型
  if(isNaN(num))
    num = "0";

  // 获取符号(正/负数)
  let sign = (num == (num = Math.abs(num)));

  num = Math.floor(num*Math.pow(10,cent)+0.50000000001); // 把指定的小数位先转换成整数.多余的小数位四舍五入
  let cents = num%Math.pow(10,cent);       // 求出小数位数值
  num = Math.floor(num/Math.pow(10,cent)).toString();  // 求出整数位数值
  cents = cents.toString();        // 把小数位转换成字符串,以便求小数位长度

  // 补足小数位到指定的位数
  while(cents.length<cent)
    cents = "0" + cents;

  if(isThousand) {
    // 对整数部分进行千分位格式化.
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
      num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3));
  }

  if (cent > 0)
    return (((sign)?'':'-') + num + '.' + cents);
  else
    return (((sign)?'':'-') + num);
}
export {
  number
}

如果你是vue用户用户请继续看 vue全局注册指令

/**
 * User: sheyude
 * Date: 2017/9/4 0004
 * Time: 上午 11:00
 *
 */
import {number} from './numberDirective'


import Vue from 'vue'

Vue.directive('numbers',number)

vue 使用方式 input 里面加入v-numbers就行

<template>
  <input type="text" class="form-control" placeholder="" v-numbers v-model="valueData">
</template>

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

Javascript 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
Vue.js基础知识小结
Jan 13 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
vue监听scroll的坑的解决方法
Sep 07 #Javascript
react高阶组件经典应用之权限控制详解
Sep 07 #Javascript
React + webpack 环境配置的方法步骤
Sep 07 #Javascript
微信小程序之页面拦截器的示例代码
Sep 07 #Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 #Javascript
微信小程序实现轮播图效果
Sep 07 #Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
详解Django中间件执行顺序
2018/07/16 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
易程科技软件测试笔试
2013/03/24 面试题
求职信需要的五点内容
2014/02/01 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Golang 实现WebSockets
2022/04/24 Golang