Program:
index.html:
index.js:
Output:
index.html:
<!DOCTYPE html>
<html>
<body>
<div id="ad">
<input type="text" ref="principal">
<button v-on:click="cal()"> Calculate </button>
{{ interest }}
</div>
<div style="margin-top:500px;"></div>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="./index.js"> </script>
</body>
</html>
index.js:
var app = new Vue({
el: '#ad',
data: {
years: 2,
rate: 12,
interest: '',
},
methods: {
cal: function () {
this.interest = this.$refs.principal.value * this.years * this.rate;
}
}
});
Output:
