How to concatenate variable and text in Vue.js

in Code Write a comment

In this tutorial, you’ll learn how to concatenate/chain variable and text in Vue.js.

You’ll come across to the situations when you need to, e.g. create an image path by combining a static URL and a string in HTML template, very often.

HTML template

Let’s build this example:

<img :src="staticUrl + 'img/logo.png'">

Note that staticUrl is wrapped in the double quotation marks, whereas the image name is wrapped in both double and single quotation makes.


Hi, I'm Renat 👋

 


JavaScript

Now, let’s create a “share this page” variable that will contain a link to the page and some generic text.

this.shareText = 'I’ve found this great article ' + article.permalink

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-concatenate

PS: Make sure you check other Vue.js tutorials, e.g. useful Vue.js filtershow to upload a file in Vue.js and how to dynamically change the path of href in Vue.js.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment