Comment formater les devises dans un composant Vue?

Question

Mon composant Vue est comme ceci:

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

Le résultat de {{ item.total }} est

26000000

Mais je veux que le format soit comme ça:

26.000.000,00

En jquery ou javascript, je peux le faire

Mais, comment le faire en vue composant?

Answer 1

J'ai créé un filtre. Le filtre peut être utilisé dans n'importe quelle page.

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

Alors je peux utiliser ce filtre comme ceci:

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

J'ai utilisé ces réponses pour aider à la mise en œuvre du filtre:

• Comment puis-je formater les nombres en dollars de la monnaie chaîne de caractères en JavaScript?
• Vérifier si la variable est le nombre ou une chaîne de caractères en JavaScript

Answer 2

UPDATE: Je suggère d'utiliser une solution avec des filtres, fournie par @Jess.

J'écrirais la méthode pour cela, et là où vous devez formater le prix, vous pouvez simplement mettre la méthode dans un modèle et transmettre la valeur

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

Et puis dans le template:

 <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 - Je n'ai pas mis beaucoup d'attention sur le remplacement et l'expression régulière.Il pourrait être amélioré.

Answer 3

Avec vuejs 2, vous pouvez utiliser vue2-filters, qui contient également d'autres avantages.

 npm install vue2-filters


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

Vue.use(Vue2Filters)
 

Alors utilisez-le comme suit:

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

Réf.: Https://www.npmjs.com/package/vue2-filters

Answer 4

Vous pouvez formater la monnaie d'écrire votre propre code, mais c'est juste pour l'instant - lorsque votre application va grandir, vous pouvez avoir besoin d'autres devises.

Il y a un autre problème avec ceci:

1. Pour FR-us - dollar signe est toujours à la veille de la devise - $2.00,
2. Pour certains PL de vous renvoyer à signer à la suite d'montant comme 2,00 zł.

Je pense que la meilleure option est d'utiliser la solution complexe pour l'internationalisation de l'ex. de la bibliothèque de vue-i18n( http://kazupon.github.io/vue-i18n/).

J'utilise ce plugin et je n'ai pas à vous soucier de telles choses. Veuillez consulter la documentation - c'est vraiment simple:

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

donc, il vous suffit d'utiliser:

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

et jeu FR-nous pour obtenir de 100,00$:

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

ou jeu de PL pour obtenir 100,00 zł:

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

Ce plugin aussi fournir des différentes fonctionnalités telles que les traductions et le formatage de la date.

Answer 5

Le commentaire de @RoyJ a une excellente suggestion. Dans le modèle, vous pouvez simplement utiliser des chaînes localisées intégrées:

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

Il n'est pas pris en charge par certains des anciens navigateurs, mais si vous ciblez IE 11 ou une version ultérieure, tout devrait bien se passer.