Vue.js 2 Cookbook

How to do it...

Let's say you have a friend John. You want to prepare a formatted thank-you note before receiving a gift, but you don't know what he'll be giving you yet. You prewrite three texts:

new Vue({     el: '#app',   data: {     htmlTexts: [     'Dear John,<br/>thank you for the <pre>Batman vs Superman</pre> DVD!',     'Dear John,<br/>thank you for <i>Ghostbusters 3</i>!',     'Dear John,<br/>thanks, <b>Gods of Egypt</b> is my new favourite!'     ]   } })

Consider that you were to output this variable directly in mustaches, as shown:

<div id="app">   {{htmlTexts[0]}} </div>

The problem is that, in this case, you would get plain text and all the HTML gibberish:

This is not what you're looking for; you would like your thank-you letter well formatted ...