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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
canvas时钟效果
Feb 16 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 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
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php生成rss类用法实例
2015/04/14 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
PHP7 list() 函数修改
2021/03/09 PHP
jquery对元素拖动排序示例
2014/01/16 Javascript
javascript闭包入门示例
2014/04/30 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
Javascript的比较汇总
2016/07/25 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python 函数返回值的示例代码
2019/03/11 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
学习雷锋寄语大全
2014/04/11 职场文书
2014年消防工作总结
2014/11/21 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
实验室安全管理制度
2015/08/05 职场文书