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.

Expressions

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 
<!--<p>--> 
  <!--{{ Math.pow(5, 2) }}--> 
<!--</p>--> 

You will see number 25 on the page. Nice, isn't it? Let's replace some of our data bindings in the Pomodoro application with a JavaScript...