console
new Vue({
el: '#app',
template: '#root',
data: {
startOn: '',
endOn: '2016-8-26',
days: 0,
amount: 0,
showResult: false
},
methods: {
calc: function() {
var d1 = moment(this.startOn);
var d2 = moment(this.endOn);
this.days = d2.diff(d1, 'days');
this.showResult = true;
}
},
computed: {
interest: function() {
var ret = this.amount * this.days * 0.06 / 365;
return ret.toFixed(2)
}
}
})
<h2>
富海花园债权日数计算
</h2>
<div id="app">
加载中,请稍等...
</div>
<script template='text/x-template' id='root'>
<div id="app">
<form action="" @submit.prevent='calc'>
<label for="">基本金额
<input type="text" v-model='amount'>
</label>
<label for="">开始日期
<input type="text" v-model='startOn'>
</label>
<label for="">截止日期
<input type="text" v-model='endOn'>
</label>
<button type='submit'>计算</button>
</form>
<div v-if='showResult'>
<p>实际天数:{{days}}</p>
<p>按银行费率 6% 计算: 利息 = {{amount}} x {{days}} x 6% / 365</p>
<p>算得利息:{{interest}} 元</p>
</div>
</div>
</script>
<script src="http://cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>
<script src="http://cdn.bootcss.com/moment.js/2.16.0/moment.min.js"></script>
label, button {
display: block;
margin: .5em;
}
input {
padding: .5em;
}
button {
width: 210px;
padding: 10px;
margin: 2em .5em;
}