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 invertir una string usando filtros, tenemos que escribir lógica para invertir la string y aplicar el filtro en una string requerida.
Enfoque 1: en este enfoque, utilizaremos los métodos integrados de JavaScript split(), reverse() y join(). El método split() se utiliza para dividir cada carácter y convertirlo en un conjunto de la array de caracteres. El método reverse() invierte el carácter de la array como un todo y, finalmente, el método join convierte la array de caracteres en una string normal.
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>Original String:
</strong>{{st1}}
</p>
<p><strong>Reverse String :
</strong>{{ st1 | reverse }}
</p>
</br>
<p><strong>Original String:
</strong>{{st2}}
</p>
<p><strong>Reverse String :
</strong>{{ st2 | reverse }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
st1: 'GeekforGeeks is a computer science portal',
st2: 'I am a GeekforGeeks Learner',
},
filters: {
reverse: function(data) {
const reverse =
data.split("").reverse().join("");
return reverse;
}
}
})
Enfoque 2: este método no utiliza ningún método de JavaScript incorporado, sino que invierte la string desde cero utilizando la lógica de programación básica de invertir la string. Hay dos punteros llamados i y j que intercambian su carácter posicional cada vez hasta que la string se invierte como un todo.
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>Original String:
</strong>{{st1}}
</p>
<p><strong>Reverse String :
</strong>{{ st1 | reverse }}
</p>
</br>
<p><strong>Original String:
</strong>{{st2}}
</p>
<p><strong>Reverse String :
</strong>{{ st2 | reverse }}
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el : '#parent',
data : {
st1 : 'GeekforGeeks is a computer science portal',
st2 : 'I am a GeekforGeeks Learner',
},
filters:{
reverse : function(data){
var rev = [];
for (let i = data.length - 1,
j = 0; i >= 0; i--, j++)
rev[j] = data[i];
revStr = rev.join('');
return revStr;
}
}
})
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