Vue.js 2.x by Example

Creating links using v-html

The next step is to link the email address so that it is clickable for users viewing the list of people. In this instance, we need to concatenate strings by adding a mailto: before the email address. 

The first instinct is to do the following:

      <a href="mailto:{{person.email}}">{{ person.email }}</a>

But Vue doesn't allow interpolation inside attributes. Instead, we must use the v-bind directive on the href attribute. This turns the attribute into a JavaScript variable, so any raw text must be written in quotes, and the concatenated with the desired variable:

<a v-bind:href="'mailto:' + person.email">{{ person.email }}</a>

Note the addition of v-bind:, the single quotes and concatenation + identifier.