How to dynamically show images and links in Vue.js v-for loop

When using Vue.js I often get asked about displaying images and dynamically changing URL’s. To do this you have to use binding which is quite simply using a colon so you need to use v-bind: or its alias :

Images

Here is an example of an image.

	<img v-for="image in images" :src="image.url" :alt="image.alt" />

Have a look on YouTube

Links

How to create href link from Vue.js responses.

	<a v-bind:href="url">

How to add an id onto a fixed url.

	<a :href="'/job/' + r.id">

Have a look on YouTube