I'm trying to do something like this.
I have this text in a variable :
let text = 'hey this is a super long phrase'
And I want to use a label to display the text, but I want to display only a few characters.
For my variable text I wanna display only 5 characters.
<label>{{text}}</label> //display the full text
And I wanna do something like this :
<label>{{text}}</label> //display only hey t
It really depends on which version of Vue you're using. Vue 2 supported filters (or pipes):
filters: {
short: function (value) {
return value.substr(0, 5); // just an example
}
}
And then
<label>{{ text | short }}</label>
In Vue 3 you just need to create a computed property (which was also possible in Vue 2, filters were just another way for that):
computed: {
shortText() {
return this.text.substr(0, 5)
}
}
// if you're using Composition API
const shortText= computed(() => text.value * 2); // if text is another ref
<label>{{ shortText }}</label>
You can use JavaScript expression in vuejs template.
<label>{{text.substring(0,5)}}</label>
You can use String.prototype.slice()
document.body.innerHTML = 'hey this is a super long phrase'.slice(0, 5)