Vue es un marco progresivo para construir interfaces de usuario. La biblioteca principal se centra solo en la capa de visualización y es fácil de seleccionar e integrar con otras bibliotecas. Vue también es perfectamente capaz de impulsar sofisticadas aplicaciones de una sola página en combinación con herramientas modernas y bibliotecas de soporte.
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 conversión de un número decimal a valores porcentuales se puede realizar mediante filtros. La lógica del filtro comprobará primero si el número es menor o igual a 1. Cuando el usuario proporciona un número mayor que 1, se muestra un mensaje pidiéndole al usuario que ingrese un número válido, de lo contrario, multiplicaremos el número por 100 y devolverlo agregando un signo de porcentaje (%).
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<p><strong>Decimal1: </strong>
{{dec1}}
</p>
<p><strong>Percentage : </strong>
{{ dec1 | percent }}
</p>
<p><strong>Decimal2: </strong>
{{dec2}}
</p>
<p><strong>Percentage : </strong>
{{ dec2 | percent }}
</p>
<p><strong>Decimal3: </strong>
{{dec3}}
</p>
<p><strong>Percentage : </strong>
{{ dec3 | percent }}
</p>
<p><strong>Decimal4: </strong>
{{dec4}}
</p>
<p><strong>Percentage : </strong>
{{ dec4 | percent }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
dec1: 0.1,
dec2: 0.023,
dec3: 0.47,
dec4: 13
},
filters: {
percent: function(dec) {
if (dec <= 1) {
return dec * 100 + "%";
}
return 'Please enter number less than or equal to 1'
}
}
})
Producción:
De decimal a porcentaje usando filtro
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