En este artículo, vamos a aprender cómo convertir datos a la unidad de datos dada 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. 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 los valores de datos a KB, MB, GB o TB se puede realizar mediante un filtro. La lógica del filtro primero dividirá el valor por 1024 elevado a la potencia de una constante. Por ejemplo, para convertir el valor en Kilobytes, se supone que la constante es 1, de manera similar, para un valor en Megabytes, el valor constante es 2, y así sucesivamente.
El siguiente ejemplo demostrará este enfoque:
Ejemplo: En este ejemplo, convertiremos varios valores de bytes a la unidad de datos dada al filtro.
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<div id='parent'>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p><strong>Bytes: </strong>{{d1}}B</p>
<p><strong>MegaBytes : </strong>
{{ d1 | bytes('MB') }}
</p>
<p><strong>Bytes: </strong>{{d2}}B</p>
<p><strong>KiloBytes : </strong>
{{ d2 | bytes('KB') }}
</p>
<p><strong>Bytes: </strong>{{d3}}B</p>
<p><strong>TeraBytes : </strong>
{{ d3 | bytes('TB') }}
</p>
<p><strong>Bytes: </strong>{{d4}}B</p>
<p><strong>GigaBytes : </strong>
{{ d4 | bytes('GB') }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: "#parent",
// Define the data to be converted
data: {
d1: 200000,
d2: 1024,
d3: 3532283533343,
d4: 24322664648,
},
filters: {
bytes: function (data, to) {
const const_term = 1024;
// Convert the values and concatenate
// the appropriate unit
if (to === "KB") {
return (data / const_term).toFixed(3) + "KB";
} else if (to === "MB") {
return (data / const_term ** 2).toFixed(3) + "MB";
} else if (to === "GB") {
return (data / const_term ** 3).toFixed(3) + "GB";
} else if (to === "TB") {
return (data / const_term ** 4).toFixed(3) + "TB";
} else {
return "Please pass valid option";
}
},
},
});
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