VueJ에서의 번호 포맷 방법s

VueJ에서의 번호 포맷 방법s

VueJ에서 숫자를 포맷하는 방법을 찾을 수 없었습니다.제가 찾은 건 통화 필터와 통화 서식을 위한 vue-numeric뿐입니다. 라벨처럼 보이려면 약간의 수정이 필요합니다.반복된 어레이 구성원을 표시하는 데 사용할 수 없습니다.

number.js 설치:

npm install numeral --save  

커스텀 필터를 정의합니다.

<script>
  var numeral = require("numeral");

  Vue.filter("formatNumber", function (value) {
    return numeral(value).format("0,0"); // displaying other groupings/separators is possible, look at the docs
  });

  export default
  {
    ...
  } 
</script>

사용방법:

<tr v-for="(item, key, index) in tableRows">
  <td>{{item.integerValue | formatNumber}}</td>
</tr>

Intl.NumberFormat(), 디폴트 사용:

...
created: function() {
    let number = 1234567;
    console.log(new Intl.NumberFormat().format(number))
},
...

//console -> 1 234 567

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

JavaScript에는 이를 위한 함수가 내장되어 있습니다.

변수가 항상 숫자이고 "숫자 문자열"이 아닌 경우 다음을 수행할 수 있습니다.

{{ num.toLocaleString() }}

안전하려면 다음을 수행하십시오.

{{ Number(num).toLocaleString() }}

출처 : https://forum.vuejs.org/t/filter-numeric-with-comma/16002/2

만약 당신이 정말로 간단한 일을 하고 싶다면:

<template>
  <div> {{ commission | toUSD }} </div>
</template>

<script>
export default {
  data () {
    return {
      commission: 123456
    }
  },

  filters: {
    toUSD (value) {
      return `$${value.toLocaleString()}`
    }
  }
}
</script>

좀 더 복잡해지고 싶다면 다음 코드 또는 아래 코드를 사용하십시오.

에main.js

import {currency} from "@/currency";
Vue.filter('currency', currency)

에currency.js

const digitsRE = /(\d{3})(?=\d)/g

export function currency (value, currency, decimals) {
  value = parseFloat(value)
  if (!isFinite(value) || (!value && value !== 0)) return ''
  currency = currency != null ? currency : '$'
  decimals = decimals != null ? decimals : 2
  var stringified = Math.abs(value).toFixed(decimals)
  var _int = decimals
    ? stringified.slice(0, -1 - decimals)
    : stringified
  var i = _int.length % 3
  var head = i > 0
    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
    : ''
  var _float = decimals
    ? stringified.slice(-1 - decimals)
    : ''
  var sign = value < 0 ? '-' : ''
  return sign + currency + head +
    _int.slice(i).replace(digitsRE, '$1,') +
    _float
}

및 인template:

<div v-for="product in products">
  {{product.price | currency}}
</div>

여기서도 답변을 참조할 수 있습니다.

이거 드셔보세요.vue.js 2를 사용하는 경우

<template>
{{lowPrice | currency}}
</template>
<script>
data:(){
 return {lowPrice: 200}
}
filters:{
      currency(value) {
 return new Intl.NumberFormat("en-US",
 { style: "currency", currency: "USD" }).format(value);
 }
    }
</script>

vue.disc 3은 필터를 지원하지 않으므로 이 논리를 계산에서 사용할 수 있습니다.

<template>
{{currency}}
</template>
<script>
data:(){
 return {lowPrice: 200}
}
computed:{
      currency() {
 return new Intl.NumberFormat("en-US",
 { style: "currency", currency: "USD" }).format(this.lowPrice);
 }
    }
</script>

Vue 2

커스텀 필터를 정의합니다.

var numeral = require("numeral");

Vue.filter("formatNumber", function (value) {
    return numeralIntl.NumberFormat(value);
});

사용방법:

<tr v-for="(item, key, index) in tableRows">
  <td>{{item.integerValue | formatNumber}}</td>
</tr>

Vue 3

필터는 vue 3에서 삭제되므로 글로벌 속성으로 정의합니다.

app.config.globalProperties.$filters = {
    formatNumber(number) {
        return Intl.NumberFormat().format(number);
    }
}

사용방법:

<h3>{{ $filters.formatNumber(count) }}</h3>

칠레에서 왔는데 커스텀 포맷을 추가해서...예: $50.000.000,56

install npm install number --save

import numeral from 'numeral'
// load a locale
numeral.register('locale', 'cl', {
  delimiters: {
    thousands: '.',
    decimal: ','
  },
  abbreviations: {
    thousand: 'm',
    million: 'M',
    billion: 'B',
    trillion: 'T'
  },
  ordinal: function (number) {
    return number === 1 ? 'er' : 'ème'
  },
  currency: {
    symbol: '$'
  }
})

// switch between locales
numeral.locale('cl')

그런 다음 형식 사용자 지정 추가...

Vue.filter('formatNumberMoney', function (value) {
  return numeral(value).format('0,0.')
   // displaying other groupings/separators is possible, look at the docs
})

vue-numeral-filter는 언제든지 시도해 볼 수 있습니다.

<template>
    <input v-model="model" type="text" pattern="\d+((\.|,)\d+)?">
</template>

<script>
export default {
  name: "InputNumber",
  emits: ['update:modelValue'],
  props: {modelValue},
  computed: {
    model: {
      get() {
        return this.modelValue ? this.modelValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', Number(value.replaceAll(',','')))
      }
    },
  }
}
</script>

12000~12,000 등의 번호 형식을 지정하려면 다음 Vue 필터 예를 사용합니다.

1. 모든 컴포넌트에서 사용 가능한 글로벌 필터

   Vue 인스턴스가 생성된 파일(주로 main.js)로 이동합니다.

   
   Vue.filter('format_number', function (value){
     return parseInt(value).toLocaleString()
   })
   
   

   Vue 페이지에서 사용하려면

     {{ 12000 | format_number}}
   

2. 단일 vue 파일에서 사용하려면 구성 요소 옵션에 다음을 추가합니다.

   
   filters: {
     format_number: function (value){
      return parseInt(value).toLocaleString()
     }
   },
   
   

   Vue 페이지에서 사용하려면:

     {{ 12000 | format_number}}
   

필터에 대한 자세한 내용은 이 문서 페이지를 참조하십시오.

필터는 Vue 3x에서는 지원되지 않습니다.

언급URL : https://stackoverflow.com/questions/44538110/how-to-format-numbers-in-vuejs