Los filtros de Vue.JS 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. Por la presente, un marcador de posición, nos preocupa si los datos no llegan en ninguna función como se requiere, entonces la función no se ejecuta en consecuencia y en nuestra aplicación (la página web), el lugar donde la función supone devolver algo ahora queda vacante. En estos casos, podemos usar un marcador de posición (que también se puede usar para proporcionar algún mensaje de error, como datos no recibidos como excepción)
Ejemplo-1 (cuando los datos se presentan como se esperaba): cuando los datos se presentan como se esperaba, la salida en pantalla llega a ser como se esperaba. Si en un caso nuestra aplicación internamente no puede obtener datos o contiene un valor nulo o un valor vacío, entonces la pantalla en ese lugar no parece estar vacía, de lo contrario, la interfaz de usuario se ve afectada. Aquí, en el ejemplo, estoy tratando de mostrar cuándo es el valor predeterminado (valor de marcador de posición) y cuándo son los datos reales.
index.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'>
<h3>Message From GeekforGeeks</h3>
<p><strong></strong>{{ name | gfgMsg }}</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
name: 'Techies!'
},
filters: {
gfgMsg: function(data) {
if (data.length === 0) {
return "Welcome to GeekforGeeks
Computer Science Portal,\n\
Explore yourself as much as you can!"
} else {
return `Hi ${data}, We hope you have
a very good memory,\n learning\
with GeekforGeeks`
}
}
}
})
Producción :
Ejemplo 2 (cuando los datos no están presentes): en este caso, el valor de marcador de posición que configuramos o podemos decir que el valor predeterminado se muestra en la pantalla.
index.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'>
<h3>Message From GeekforGeeks</h3>
<p><strong></strong>{{ name | gfgMsg }}</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
name: ''
},
filters: {
gfgMsg: function(data) {
if (data.length === 0) {
return "Welcome to GeekforGeeks
Computer Science Portal,\n\
Explore yourself as much as you can!"
} else {
return `Hi ${data}, We hope you have a
very good memory,\n learning\
with GeekforGeeks`
}
}
}
})
Producción:
Ejemplo 3 (cuando los datos se presentan como se esperaba): los datos reales se muestran en la pantalla
index.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'>
<h3>Pool Contest</h3>
<p>{{ person | pool('Stefy') }}</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el : '#parent',
data:{
person : 'Mr./Mrs.',
},
filters:{
pool : function(data,name){
if(data.length != 0){
if(!name) {
return 'Pool is open,
register yourself soon.'
}else{
return `Welocome ${name} to the pool,
Your serial no: AXP100`
}
}
}
}
})
Producción:
Marcador de posición usando filtros: cuando los datos se presentan como se esperaba
Ejemplo 4 (cuando los datos no están presentes): valor de marcador de posición que establecemos o podemos decir que el valor predeterminado se muestra en la pantalla.
index.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'>
<h3>Pool Contest</h3>
<p>{{ person | pool }}</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el : '#parent',
data:{
person : 'Mr./Mrs.',
},
filters:{
pool : function(data,name){
if(data.length != 0){
if(!name) {
return 'Pool is open,
register yourself soon.'
}else{
return `Welocome ${name} to the pool,
Your serial no: AXP100`
}
}
}
}
})
Producción :
Marcador de posición usando filtros: cuando los datos no están presentes
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