Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Organize + Automate + Deploy = Webpack Chapter 16

</div>
</div>

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


strings by JavaScript.


In the JavaScript part, declare the three model variables by writing the following code:


export default {
name: 'app',
data () {
return {
principal: 0,
interestRate: 0,
timeYears: 0
}
}
}

To calculate the compound interest, we take the math formula for it:


In JavaScript, it can be written as follows:


P * Math.pow((1 + r), t)

You have to add this to the Vue component as a computed property, as shown:


computed: {
final () {
const P = this.principal
const r = this.interestRate
const t = this.timeYears
return P * Math.pow((1 + r), t)
}
}

You can run your application with the following command (launched from your directory):


npm run dev
Free download pdf