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 verificar que la string sea palíndromo o que no use filtros, primero debemos invertir la string y, en consecuencia, escribir la lógica del palíndromo de strings y aplicar el filtro en la string. Tanto el ejemplo está trabajando en un enfoque diferente.
Ejemplo 1:
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'>
<p>
<strong>String1 : </strong>
{{ st1 | pCheck }}
</p>
<p>
<strong>String2 : </strong>
{{ st2 | pCheck }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el : '#parent',
data : {
st1 : 'I am not',
st2 : 'iTopiNonAvevAnoNipoTi',
},
filters:{
pCheck : function(data){
var rev = [];
for (let i = data.length - 1, j = 0; i >= 0; i--, j++)
rev[j] = data[i];
reverse = rev.join('');
if(data == reverse) return 'Palindrome'
else return 'Not Palindrome'
}
}
})
Producción:
Ejemplo 2:
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'>
<p>
<strong>String1 : </strong>
{{ st1 | pCheck }}
</p>
<p>
<strong>String2 : </strong>
{{ st2 | pCheck }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el : '#parent',
data : {
st1 : 'I am not',
st2 : 'iTopiNonAvevAnoNipoTi',
},
filters:{
pCheck : function(data){
const reverse = data.split("").reverse().join("");
if(data == reverse) return 'Palindrome'
else return 'Not Palindrome'
}
}
})
Producción:
verificación de palíndromo 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