Using expressions and filters

In the previous example, we have used simple property keys inside the {{}} interpolations. Actually, Vue supports a lot more inside these nice curly brackets. Let's see what it is possible to do there.


It might sound unexpected, but Vue supports full JavaScript expressions inside the data binding brackets! Let's go to any of the Pomodoro application components and add any JavaScript expression to the template. You can do some experiments in the chapter4/pomodoro2 folder.

Try, for example, to open the StateTitleComponent.vue file. Let's add some JavaScript expression interpolation to its template, for example:

{{ Math.pow(5, 2) }} 

Actually, you just need to uncomment the following lines:

//StateTitleComponent.vue ...

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

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.