Vue.js es un marco progresivo para crear 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 se pueden usar para aplicar formato y transformaciones a cualquier parte de los datos dinámicos de la 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 se imprime en la plantilla de Vue.js. Para usar strings en mayúsculas, tenemos que escribir lógica de mayúsculas y minúsculas en filtros y aplicar el filtro en la string requerida.
Ejemplo:
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>Name : </strong>
{{ name | capitalising }}
</p>
<p><strong>Details : </strong>
{{ details | capitalising }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
name: "aISer wOLD",
details: "GeeksforGeeks is a computer science portal\
with a huge variety of well written and\
explained computer science and programming\
articles, quizzes and interview questions.\
The portal also has dedicated GATE\
preparation and competitive programming\
sections."
},
filters: {
capitalising: function (data) {
var capitalized = []
data.split(' ').forEach(word => {
capitalized.push(
word.charAt(0).toUpperCase() +
word.slice(1).toLowerCase()
)
})
return capitalized.join(' ')
}
}
})
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