怎么在vue中實現一個數字類型的過濾器

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

調用的函數

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>

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