怎么在vue中實(shí)現(xiàn)一個數(shù)字類型的過濾器

怎么在vue中實(shí)現(xiàn)一個數(shù)字類型的過濾器？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

調(diào)用的函數(shù)

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, '');
    }
  }
}

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

  // 檢查傳入數(shù)值為數(shù)值類型
  if(isNaN(num))
    num = "0";

  // 獲取符號(正/負(fù)數(shù))
  let sign = (num == (num = Math.abs(num)));

  num = Math.floor(num*Math.pow(10,cent)+0.50000000001); // 把指定的小數(shù)位先轉(zhuǎn)換成整數(shù).多余的小數(shù)位四舍五入
  let cents = num%Math.pow(10,cent);       // 求出小數(shù)位數(shù)值
  num = Math.floor(num/Math.pow(10,cent)).toString();  // 求出整數(shù)位數(shù)值
  cents = cents.toString();        // 把小數(shù)位轉(zhuǎn)換成字符串,以便求小數(shù)位長度

  // 補(bǔ)足小數(shù)位到指定的位數(shù)
  while(cents.length<cent)
    cents = "0" + cents;

  if(isThousand) {
    // 對整數(shù)部分進(jìn)行千分位格式化.
    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用戶用戶請繼續(xù)看 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>

關(guān)于怎么在vue中實(shí)現(xiàn)一個數(shù)字類型的過濾器問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。