How to concatenate two strings in Vue

In this tutorial, we are going to learn about how to concatenate two strings in Vue.js with the help of examples.

Consider, we have a following img string and url string in Vue code:

<template>
  <div id="app">
    <img src="" />
  </div>
</template>

<script>
export default {
  data(){
    url: "https://reactgo.com"
    img: "/img/car.png"
  }
};
</script>

Now, we need to concatenate above two strings.

Concatenating two strings in Vue

To concatenate the two strings in vue, we can use the v-bind directive followed by the two strings.

The v-bind directive dynamically binds attribute to a javascript expression.

Here is an example:

<template>
  <div id="app">
    <img v-bind:src="url + img" />
  </div>
</template>

<script>
export default {
  data(){
    url: "https://reactgo.com"
    img: "/img/car.png"
  }
};
</script>

In the above code, we have used v-bind directive to bind attribute to a JavaScript variable and we have used the plus + to join the two strings.

Similarly, we can use the es6 template literals to concatenate the strings in Vue.

<template>
  <div id="app">
    <img v-bind:src="`${url}/img/car.png`" />
  </div>
</template>

<script>
export default {
  data(){
    url: "https://reactgo.com"
  }
};
</script>

we can also use the short hand property of v-bind directive like this:

<img :src="url + img" />