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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
javascript RegExp 使用说明
May 21 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
AJAX实现省市县三级联动效果
Oct 16 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生成图片验证码的方法
2016/04/15 PHP
php 基础函数
2017/02/10 PHP
PHP7 新增常量
2021/03/09 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
BootStrap中
2016/12/10 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
浅谈Python中copy()方法的使用
2015/05/21 Python
Python制作数据导入导出工具
2015/07/31 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
应届生高等护理求职信
2013/10/12 职场文书
工作失职检讨书范文
2014/01/16 职场文书
党员干部承诺书
2014/03/25 职场文书
运动会加油稿
2015/07/22 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Nginx进程调度问题详解
2021/09/25 Servers
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS