Sometimes you need to insert HTML content, such as line breaks (<br>
), in your application data. This can be easily achieved with the v-html
directive.
In this recipe, we will build a thank-you note.
For this recipe, you don't need any special knowledge, but we will build upon some basic Vue functionalities; if you completed a recipe in this or the last chapter, you are good to go.
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...