Building the compound interest calculator

To build the compound interest calculator, you need three fields: the initial capital or principal, the yearly interest rate, and the investment length. You will then add an output field to display the final result. Here's the corresponding HTML code:

<div id="app">  <div>    <label>principal capital</label>    <input v-model.number="principal">  </div>  <div>    <label>Yearly interestRate</label>    <input v-model.number="interestRate">  </div>  <div>    <label>Investment length (timeYears)</label>    <input v-model.number="timeYears">  </div>  <div>    You will gain:    <output>{{final}}</output>  </div></div>

We put the .number modifier, or otherwise the numbers we put inside will be converted to strings by JavaScript.

In the ...

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.