En este artículo, vamos a aprender cómo eliminar todas las apariciones de una palabra en particular 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 ocurrencia de una palabra en particular se puede eliminar usando filtros en la string requerida. Usaremos el método split() de JavaScript para dividir la string en la palabra de destino particular que debe eliminarse. Esto devolverá una array que se divide en los puntos donde aparece esa palabra en particular, excepto la palabra que se usó para dividir la string. Finalmente, uniremos la array usando el método join() y 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 Delete: </strong>
{{ st1 | delete('computer') }}
</div>
</p>
<p>
<strong>Original String: </strong>
{{st2}}
<div>
<strong>After Delete: </strong>
{{ st2 | delete('language') }}
</div>
</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. computer science is the study\
of algorithmic processes, computational\
machines and computation itself',
st2: 'C++ is a best language for competitive
programming, Javascript is best\
for scripting language',
},
filters: {
delete: function (st, target) {
const result = st.split(target).join('')
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