vue 디지털 형식 필터 의 예제 코드

수 요 는 숫자 만 입력 할 수 있 습 니 다.
알파벳 과 특수 문 자 를 입력 하면 자동 으로 필터 링 됩 니 다.
입력 완료 초점 잃 음 자동 더하기.00 소수 자동 반올림 을 입력 하면 22.22 와 같은 형식 입 니 다.
효과 도

일반 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>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.