<!-- fichier index.html -->

<!DOCTYPE html>
<html lang="fr">
  <head><title>index.html</title></head>
  <body>
    <div id="app">
        <span>{{ prix | arrondir(2) | grouper }} €</span>
    </div>
    <!-- chargement de la librairie Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.filter('arrondir', function(valeur, nbDec) {
      if (isNaN(valeur)) return '';
        let x = Math.pow(10, nbDec); // facteur
        return (Math.round(valeur * x) / x).toFixed(nbDec);
      });

      Vue.filter('grouper', function(val) {
        if (typeof val !== 'string') return '';
        tab = val.split('.');
        taille = tab[0].length;
        tab[0] = tab[0].slice(0, taille - 3) + ' ' + tab[0].slice(-3); 
        return tab[0] + ',' + tab[1];
      });

      let vm = new Vue({
        el: "#app",
        data: {
          prix: 1000.5678,
        },
      });
    </script>
  </body>
</html>
