How to get String length in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To get String length in vueJS, we are using the VueJS .length attribute string.length ,it will return the length of string.

Today I am going to show you How you get String length in VueJS.

Table of contains

• Define msg property for Test
• Using string.length attribute

Let’s start today’s tutorial How do I get String length in VueJS?

Define msg property for Test

Let’s define the msg and result in the data of the FirstComponent.vue component for testing purposes.

FirstComponent.vue

<script>
export default {
    name: 'FirstComponent',
    data() {
        return{
            msg:"Hi Friends Welcome To SortoutCode",
        }
    },
}
</script>

Data is used to define properties in a particular component. In a single-file component, data() is a function that returns a set of properties that have been described in the function.

we define the msg you can see that.

Using string.length attribute

We can easily find out the string length. Using the vueJS .length attribute. we can get vue js to get string length using the .length attribute.

It seems very easy, but sometimes we need to get our string length or size at the time we need to get length using Vue js.

let’s see the code example:

FirstComponent.vue

<template>
    <div>
        <h2>Message: {{msg}}</h2>
        <h2>Message Length: {{msg.length}}</h2>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg:"Hi Friends Welcome To SortoutCode",
        }
    },
}
</script>

Let’s check the output of the .length method examples.

Output

All the best 👍.