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.
Para escribir una string en minúsculas usando filtros, tenemos que escribir lógica para convertir una string regular en minúsculas y aplicar el filtro en una string requerida.
Ejemplo 1:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script src='app.js'></script>
</head>
<body>
<div id='parent'>
<p>
<strong>Name : </strong>
{{ name | lowerCased }}
</p>
<p>
<strong>Details : </strong>
{{ details | lowerCased }}
</p>
</div>
</body>
</html>
aplicación.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 tyPestting, remaINIng
eSSEntially unchanGED"
},
filters:{
lowerCased : function(data){
lower = []
data.split(' ').forEach(word => {
lower.push(word.toLowerCase())
})
return lower.join(' ')
}
}
})
Producción :
String de revestimiento inferior 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