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.
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 filters, how to upload a file in Vue.js and how to dynamically change the path of href in Vue.js.