En este artículo, vamos a aprender cómo truncar strings usando filtros en VueJS. 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 extracción de strings se puede realizar aplicando un filtro en la string requerida. Puede haber dos enfoques para escribir la lógica de la función de filtro:
Enfoque 1: en este enfoque, utilizamos los métodos integrados de JavaScript split, slice y join . El método de división se utiliza para dividir cada carácter y convertirlos en un conjunto de una array de caracteres. El método slice extrae la porción requerida de la string y la devuelve. El método de unión se utiliza para convertir una array de caracteres en una string normal. Usaremos los tres métodos juntos para truncar la string. El método substr también se puede usar para devolver una string truncada.
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}}
</p>
<p>
<strong>Truncated String : </strong>
{{ st1 | truncate(13) }}
</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'
},
filters: {
truncate: function(data,num){
const reqdString =
data.split("").slice(0, num).join("");
return reqdString;
}
}
})
Producción:
Enfoque 2: este método no utiliza ningún método JavaScript integrado. El truncamiento se realiza recorriendo los caracteres de la string el número requerido de veces y manteniendo el número requerido de caracteres agregándolos a la string final que se devolvería.
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}}
</p>
<p><strong>Truncated String : </strong>
{{ st1 | truncate(18) }}
</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'
},
filters: {
truncate: function(data, num) {
reqdString = ''
for(let i=0; i<num; i++) {
reqdString += data[i]
}
return reqdString;
}
}
})
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