En este artículo, vamos a aprender cómo abreviar un número usando filtros en VueJS. Los filtros son una funcionalidad proporcionada por los componentes de Vue que le permiten aplicar formato y transformaciones a cualquier parte de los datos dinámicos de su plantilla.
Los filtros son una funcionalidad proporcionada por los componentes de Vue que le permiten aplicar formato y transformaciones a cualquier parte de los datos dinámicos de su plantilla. La propiedad de filtro del componente es un objeto. Un filtro único es una función que acepta un valor y devuelve otro valor. El valor devuelto es el que realmente está impreso en la plantilla de Vue.js.
La abreviatura de números en kilo(K) y millón(M) se puede realizar mediante filtros. Primero verificamos si todo el número es menor que un millón o mayor. Esto se puede hacer usando lógica matemática simple o contando la longitud del número convirtiéndolo en una string. Si el número es menor que un millón, lo dividimos por 1000; de lo contrario, dividimos el número por 1000000 y devolvemos el valor mínimo junto con la abreviatura necesaria.
Ejemplo:
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<p><strong>Number1: </strong>
{{number1}}
</p>
<p><strong>
Abbreviated Number : </strong>
{{ number1 | abbr }}
</p>
<p><strong>
Number2: </strong>{{number2}}
</p>
<p><strong>
Abbreviated Number : </strong>
{{ number2 | abbr }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
number1: 123768,
number2: 7549653906
},
filters: {
abbr: function(num) {
if (String(num).length < 7) {
return Math.floor(num/1000) + 'K';
} else {
return Math.floor(num/1000000) + 'M';
}
}
}
})
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA