<!-- archivo index.html -->

<!DOCTYPE html>
<html lang="es">
  <head><title>index.html</title></head>
  <body>
    <div id="app">
        <span>{{ precio | redondear(2) | agrupar }} €</span>
    </div>
    <!-- carga de la librería Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.filter('redondear', function(valor, numDec) {
      if (isNaN(valor)) return '';
        let x = Math.pow(10, numDec); // facteur
        return (Math.round(valor * x) / x).toFixed(numDec);
      });

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

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