मैं एक Vue घटक में मुद्राओं को कैसे प्रारूपित करूं?

Question 1

मेरा Vue घटक इस प्रकार है:

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ item.total }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ...
        computed: {
            list: function() {
                return this.$store.state.transaction.list
            },
            ...
        }
    }
</script>

का नतीजा {{ item.total }}है

26000000 है

लेकिन मैं चाहता हूं कि यह प्रारूप इस तरह हो:

26.000.000,00

Jquery या javascript में, मैं इसे कर सकता हूँ

लेकिन, इसे वीयू कंपोनेंट में कैसे करें?

Question 2

अद्यतन: मैं @ Jess द्वारा प्रदान की गई, फिल्टर के साथ एक समाधान का उपयोग करने का सुझाव देता हूं।

मैं उस के लिए एक विधि लिखूंगा, और फिर जहां आपको मूल्य को प्रारूपित करने की आवश्यकता है आप केवल विधि को टेम्पलेट में डाल सकते हैं और मूल्य नीचे दे सकते हैं

methods: {
    formatPrice(value) {
        let val = (value/1).toFixed(2).replace('.', ',')
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    }
}

और फिर टेम्पलेट में:

<template>
    <div>
        <div class="panel-group"v-for="item in list">
            <div class="col-md-8">
                <small>
                   Total: <b>{{ formatPrice(item.total) }}</b>
                </small>
            </div>
        </div>
    </div>
</template>

BTW - मैंने जगह और नियमित अभिव्यक्ति पर बहुत अधिक ध्यान नहीं दिया। इसमें सुधार किया जा सकता था।enter code here

कोड स्निपेट दिखाएं

Vue.filter('tableCurrency', num => {
  if (!num) {
    return '0.00';
  }
  const number = (num / 1).toFixed(2).replace(',', '.');
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

Expand snippet

Question 3

मैंने एक फ़िल्टर बनाया है। फ़िल्टर का उपयोग किसी भी पृष्ठ में किया जा सकता है।

Vue.filter('toCurrency', function (value) {
    if (typeof value !== "number") {
        return value;
    }
    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0
    });
    return formatter.format(value);
});

तो मैं इस तरह इस फिल्टर का उपयोग कर सकते हैं:

        <td class="text-right">
            {{ invoice.fees | toCurrency }}
        </td>

मैंने फ़िल्टर के कार्यान्वयन में मदद करने के लिए इन संबंधित उत्तरों का उपयोग किया:

Question 4

Vuejs 2 के साथ, आप vue2- फ़िल्टर का उपयोग कर सकते हैं जिसमें अन्य उपहार भी हैं।

npm install vue2-filters


import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

फिर इसे इस तरह उपयोग करें:

{{ amount | currency }} // 12345 => $12,345.00

Ref: https://www.npmjs.com/package/vue2-filters

Question 5

आप अपनी खुद की कोड लिखने वाली मुद्रा को प्रारूपित कर सकते हैं, लेकिन यह फिलहाल का समाधान है - जब आपका ऐप बढ़ेगा तो आपको अन्य मुद्राओं की आवश्यकता हो सकती है।

इसके साथ एक और मुद्दा है:

EN-us के लिए - मुद्रा पर मुद्रा से पहले हमेशा हस्ताक्षर होता है - $ 2.00,
चयनित PL के लिए आप 2,00 zł जैसी राशि के बाद साइन इन करते हैं।

मुझे लगता है कि सबसे अच्छा विकल्प अंतर्राष्ट्रीयकरण के लिए जटिल समाधान का उपयोग करना है जैसे पुस्तकालय vue-i18n ( http://kazupon.github.io/vue-i18n/ )।

मैं इस प्लगइन का उपयोग करता हूं और मुझे ऐसी चीजों के बारे में चिंता करने की आवश्यकता नहीं है। कृपया दस्तावेज़ देखें - यह वास्तव में सरल है:

http://kazupon.github.io/vue-i18n/guide/number.html

तो आप बस उपयोग करें:

<div id="app">
  <p>{{ $n(100, 'currency') }}</p>
</div>

और $ 100.00 पाने के लिए EN-us सेट करें :

<div id="app">
  <p>$100.00</p>
</div>

या पीएल सेट करने के लिए 100,00 zł :

<div id="app">
  <p>100,00 zł</p>
</div>

यह प्लगइन अनुवाद और दिनांक स्वरूपण जैसी विभिन्न सुविधाएँ भी प्रदान करता है।

Question 6

@RoyJ की टिप्पणी का शानदार सुझाव है। टेम्प्लेट में आप केवल अंतर्निहित स्थानीय स्ट्रिंग्स का उपयोग कर सकते हैं:

<small>
     Total: <b>{{ item.total.toLocaleString() }}</b>
</small>

यह कुछ पुराने ब्राउज़रों में समर्थित नहीं है, लेकिन यदि आप IE 11 को लक्षित कर रहे हैं और बाद में, आपको ठीक होना चाहिए।

Question 7

मैंने @Jess द्वारा प्रस्तावित कस्टम फ़िल्टर समाधान का उपयोग किया लेकिन मेरी परियोजना में हम टाइपस्क्रिप्ट के साथ Vue का उपयोग कर रहे हैं। यह टाइपस्क्रिप्ट और क्लास डेकोरेटर्स के साथ कैसा दिखता है:

import Component from 'vue-class-component';
import { Filter } from 'vue-class-decorator';

@Component
export default class Home extends Vue {

  @Filter('toCurrency')
  private toCurrency(value: number): string {
    if (isNaN(value)) {
        return '';
    }

    var formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0
    });
    return formatter.format(value);
  }
}

इस उदाहरण में फ़िल्टर का उपयोग केवल घटक के अंदर किया जा सकता है। मैंने इसे वैश्विक फ़िल्टर के रूप में लागू करने की कोशिश नहीं की है, फिर भी।

Question 8

आप इस उदाहरण का उपयोग कर सकते हैं

formatPrice(value) {
  return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
},

Question 9

स्वीकृत उत्तर की सटीकता के साथ मुद्दे हैं।

इस परीक्षण कार्य में गोल (मान, दशमलव) कार्य करता है। सरल सरल उदाहरण के विपरीत।

यह toFixed बनाम राउंड विधि का परीक्षण है।

http://www.jacklmoore.com/notes/rounding-in-javascript/

  Number.prototype.format = function(n) {
      return this.toFixed(Math.max(0, ~~n));
  };
  function round(value, decimals) {
    return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
  }

  // can anyone tell me why these are equivalent for  50.005, and 1050.005 through 8150.005 (increments of 50)

  var round_to = 2;
  var maxInt = 1500000;
  var equalRound = '<h1>BEGIN HERE</h1><div class="matches">';
  var increment = 50;
  var round_from = 0.005;
  var expected = 0.01;
  var lastWasMatch = true;

  for( var n = 0; n < maxInt; n=n+increment){
    var data = {};
    var numberCheck = parseFloat(n + round_from);
    data.original = numberCheck * 1;
    data.expected =  Number(n + expected) * 1;
    data.formatIt = Number(numberCheck).format(round_to) * 1;
    data.roundIt = round(numberCheck, round_to).toFixed(round_to) * 1;
    data.numberIt = Number(numberCheck).toFixed(round_to) * 1;
    //console.log(data);

    if( data.roundIt !== data.formatIt || data.formatIt !== data.numberIt ||
       data.roundIt !== data.numberIt || data.roundIt != data.expected
      ){
        if(lastWasMatch){
          equalRound = equalRound + '</div><div class="errors"> <hr/> Did Not Round UP <hr/>' ;
            document.write(' <h3>EXAMPLE: Did Not Round UP: ' + numberCheck + '</h3><br /><hr/> ');
            document.write('expected: '+data.expected + ' :: ' + (typeof data.expected)  + '<br />');
            document.write('format: '+data.formatIt + ' :: ' + (typeof data.formatIt)  + '<br />');
            document.write('round : '+data.roundIt + ' :: ' + (typeof data.roundIt)  + '<br />');
            document.write('number: '+data.numberIt + ' :: ' + (typeof data.numberIt)  + '<br />');
            lastWasMatch=false;
        }
        equalRound = equalRound + ', ' + numberCheck;
    } else {
        if(!lastWasMatch){
          equalRound = equalRound + '</div><div class="matches"> <hr/> All Rounded UP! <hr/>' ;
        } {
            lastWasMatch=true;
        }
        equalRound = equalRound + ', ' + numberCheck;
    }
  }
  document.write('equalRound: '+equalRound + '</div><br />');

स्निपेट का विस्तार करें

मिश्रण उदाहरण

  export default {
    methods: {
      roundFormat: function (value, decimals) {
        return Number(Math.round(value+'e'+decimals)+'e-'+decimals).toFixed(decimals);
      },
      currencyFormat: function (value, decimals, symbol='$') {
        return symbol + this.roundFormat(value,2);
      }
    }
  }

स्निपेट का विस्तार करें