En este artículo, vamos a aprender cómo encontrar la primera aparición de una palabra en particular en una string dada 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 primera aparición de una palabra en particular se puede encontrar aplicando un filtro a la string requerida. Usaremos el método indexOf() de JavaScript para verificar el índice de la primera aparición de la palabra. Si la palabra tiene una coincidencia exacta, se devuelve el índice correspondiente y si no se encuentra la palabra, se devuelve ‘-1’ como índice.
Ejemplo:
index.html
<html>
<head>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div id='parent'>
<p>{{st1}}: <strong>
Index: {{ st1 | find('portal') }}
</strong></p>
<p>{{st2}}: <strong>
Index: {{ st2 | find('programming') }}
</strong></p>
<p>{{st3}}: <strong>
Index: {{ st3 | find('React') }}
</strong></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: "C++ is a best language for competitive programming",
st3: "Javascript is best for scripting",
},
filters: {
find: function (st, target) {
const idx = st.indexOf(target);
return idx;
},
},
});
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