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 filtrar los días laborables y los fines de semana en una semana, debemos escribir la lógica de filtrado en función de los días laborables y festivos. Usamos un switch-case para esto y filtramos según los nombres de los días.
Ejemplo:
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div id='parent'>
<p><strong>{{day1}} : </strong>
{{ day1 | weeks }}
</p>
<p><strong>{{day2}} : </strong>
{{ day2 | weeks }}
</p>
<p><strong>{{day3}} : </strong>
{{ day3 | weeks }}
</p>
<p><strong>{{day4}} : </strong>
{{ day4 | weeks }}
</p>
<p><strong>{{day5}} : </strong>
{{ day5 | weeks }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: "#parent",
data: {
day1: "Thursday",
day2: "Tuesday",
day3: "Sunday",
day4: "Monday",
day5: "Saturday",
},
filters: {
weeks: function (day) {
// Using switch case to
// decide between the days
switch (day) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
return "It is Weekday, We have to work.";
case "Saturday":
case "Sunday":
return "It is Weekend, We do not have to work.";
}
},
},
});
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