How to do string interpolation in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To do sting interpolation in vueJS, we are using the VueJS ${..}, it will return the result of.

Today I am going to show you How do you do sting interpolation in VueJS.

Table of contains

• Define msg,message,number,isActive,result property for Test
• Example of String interpolation

Let’s start today’s tutorial How do I sting interpolation in VueJS?

Define msg,message,number,isActive,result 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:"SortoutCode.com",
            message:"SortoutCode.com",
            number: 10,
            isActive: true,
            result:'',
        }
    },
}
</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,message,number,isActive,result you can see that.

Example of String interpolation

The string interpolation in JavaScript is performed by template literals (strings wrapped in backticks) and ${expression} as a placeholder.

let’s see the code example:

FirstComponent.vue

<template>
    <div>
        <h1>{{result}}</h1>
        <h1>{{ msg }}</h1>
        <h1>{{ number + 90 }} Percent</h1>
        <h1>{{ isActive? 'is active' : 'is not active' }}</h1>
    </div>
</template>
<script>
export default {
    name: 'FirstComponent',
    data(){
        return{
            msg:"SortoutCode.com",
            site_name:"SortoutCode.com",
            number: 10,
            isActive: true,
            result:'',
        }
    },
    mounted(){
        this.result = `Hi Friends, Welcome To ${this.site_name}` ;
    }
}
</script>

Let’s check the output of string interpolation examples.

Output

All the best 👍.