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. Para escribir una string en mayúsculas usando filtros, tenemos que escribir lógica para convertir una string regular en mayúsculas y aplicar el filtro en una string requerida.
Ejemplo 1:
Nombre de archivo: index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id='parent'>
<p>
<strong>Name :</strong>{{ name | upperCased }}
</p>
<p>
<strong>Details : </strong>{{ details | upperCased }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
Nombre de archivo: app.js
Javascript
const parent = new Vue({
el: "#parent",
data: {
name: "Rinkle Roy",
details:
"simply dummy text of the printing and typesetting industry.\
Lorem Ipsum has been the industry's standard dummy\
text ever since the 1500s, when an unknown printer \
took a gallery of type and scrambled it to make a type\
specimen book. It has survived not only five centuries,\
but also the leap into electronic typesetting, remaining\
essentially unchanged",
},
filters: {
upperCased: function (data) {
upper = [];
data.split(" ").forEach((word) => {
upper.push(word.toUpperCase());
});
return upper.join(" ");
},
},
});
Producción:
String en mayúsculas usando filtros
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