SOURCE

console 命令行工具 X clear

                    
>
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;
}