There's more

We can leverage that to do something more interesting. If we were aliens and we wanted to greet more than one world at a time, we could write:

We conquered 5 planets.<br/> {{'Hello ' + 5 + ' worlds'}}

We may lose track of how many worlds we conquer. No problem, we can do math inside the mustaches. Also, let's put Hello and worlds outside brackets:

We conquered {{5 + 2}} planets.<br/> Hello {{5 + 2}} worlds

Having the number of worlds as raw numbers inside the mustaches is just messy. We are going to use data binding to put it inside a named variable inside our instance:

<div id="app">   We conquered {{countWorlds}} planets.<br/>   Hello {{countWorlds}} worlds </div>new Vue({   el:'#app',   data: {     countWorlds: 5 + 2   } })  ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.