En este artículo, vamos a aprender cómo reemplazar todas las apariciones de una palabra en particular con alguna otra palabra usando filtros en VueJS. Vue es un marco progresivo para construir interfaces de usuario. 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.
La sustitución de la ocurrencia de una palabra en particular en una string dada con alguna otra palabra se puede hacer aplicando un filtro en la string requerida. Usaremos el método split() de JavaScript para dividir la string en la palabra o el carácter de destino que se debe reemplazar. Esto devolverá una array que contiene todas las palabras que estaban en la string, excepto la palabra o el carácter que se usó para dividir la string. Luego uniremos la array nuevamente usando el método join() . Este método acepta un parámetro que denota la string que se usará cuando se vuelva a unir la array. Esto hará posible agregar las palabras de reemplazo necesarias. Finalmente devolveremos la string resultante.
Ejemplo:
index.html
<html>
<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}}
<div>
<strong>After Replacing words: </strong>
{{ st1 | replace('cse','computer science') }}
</div>
</p>
<p>
<strong>Original String: </strong>{{st2}}
<div>
<strong>After Replacing characters: </strong>
{{ st2 | replace('!','.') }}
</div>
</p>
</div>
<script src='app.js'></script>
</body>
</html>
app.js
const parent = new Vue({
el: '#parent',
data: {
st1: `GfG is a CSE portal.\
CSE is the study of algorithmic
processes, CSE is a particular\
stream of a Engineering also`,
st2: '172!198!108!202',
},
filters: {
replace: function (st, rep, repWith) {
const result = st.split(rep).join(repWith)
return result;
}
}
})
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