Declarative rendering

Regular HTML attributes, such as the src of the <img> tag, can be dynamically populated with Vue using the v-bind: attribute. This allows you to populate any existing attribute with data from your Vue application. This might be an image source or element ID.

The bind option gets used by prepending the attribute you wish to populate. For example, if you wished to populate an image source with the value of a data key called imageSource, you would do the following:

View:

Create an img tag in your view app space, with a dynamic src attribute, using v-bind and a variable called imageSource.

      <p id="app">
        <img v-bind:src="imageSource">
      </p>

JavaScript:

Create a variable in your Vue JavaScript code called imageSource. Add the URL to the desired image:

      const app = new Vue({
        el: '#app',

        data: {
          imageSource: 'http://via.placeholder.com/350x150'
        }
      });

The v-bind: attribute can be shortened to just :, so, for example, v-bind:src would become :src.