CODEWITHSUNDEEP
javascriptvue.js
JohnW2Smith
JohnW2Smith

Reputation: 313

How can I display only 30 characters maximum in Vue.js?

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

Upvotes: 1

Views: 1888

Answers (3)

user459872
user459872

Reputation: 24797

You can use JavaScript expression in vuejs template.

<label>{{text.substring(0,5)}}</label>

Upvotes: 2

Andrey Popov
Andrey Popov

Reputation: 7510

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>

Upvotes: 3

programmerRaj
programmerRaj

Reputation: 2098

You can use String.prototype.slice()

document.body.innerHTML = 'hey this is a super long phrase'.slice(0, 5)

Upvotes: 0

Related Questions