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仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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 使用post,get的一种简洁方式
2010/04/25 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
php四种定界符详解
2017/02/16 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript函数详解
2014/11/17 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
微信JS接口大全
2016/08/25 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
python常用函数与用法示例
2019/07/02 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
应聘教师自荐信
2013/10/12 职场文书
黄河的主人教学反思
2014/02/07 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
酒店宣传语大全
2015/07/13 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android