<center>
  <h1>股市交易成本</h1>
  <p><small class="text-muted">修改欄位數值,自動計算股市交易成本</small></p>
</center>
<div id="app"> 
	<div class="container">
	  	<div class="row">
	  		<div class="col-sm-12 col-md-6">
				
				  <div class="form-group">
				    <label for="price">股價 (元)</label>
				    <input type="number" class="form-control" id="price" v-model="price" v-on:change="caculate" maxlength="10" min=0>
				  </div>
				  <div class="form-group">
				    <label for="fee">手續費%</label>
				    <input type="number" class="form-control" id="fee"  v-model="fee" v-on:change="caculate" maxlength="8" min=0 max=1>
				  </div>
				  <div class="form-group">
				    <label for="tax">稅金%</label>
				    <input type="number" class="form-control" id="tax"  v-model="tax" v-on:change="caculate" maxlength="8" min=0 max=1>
				  </div>
			</div>
	  		<div class="col-sm-12 col-md-6">
				  <div class="jumbotron jumbotron-fluid">
				    <div class="container">
				      <h1 class="display-6">計算結果</h1>
				        <p class="lead">您的成本為: {{result.value}} 元</p>
				        <p><small class="text-muted">試算</small></p>
				        <p><small class="text-muted">{{result.meth1}}</small></p>
				        <p><small class="text-muted">{{result.meth2}}</small></p>
				        <p class="lead">您的估算成本為: {{estimate.value}} 元</p>
				        <p><small class="text-muted">試算</small></p>
				        <p><small class="text-muted">{{estimate.meth1}}</small></p>
				        <p><small class="text-muted">{{estimate.meth2}}</small></p>
				    </div>
				  </div>
			</div>
		</div>
	</div>
</div>
  
var app = new Vue({
  el: '#app',
  data: {
    price: 80,
    fee: 0.1425,
    tax: 0.3,
    result:{
      value: '-',
      meth1: '-',
      meth2: '-'
    },
    estimate: {
      value: '-',
      meth1: '-',
      meth2: '-'
    }
  },
  methods: {
    caculate: function(){
      let ratio = (Number(this.fee)*2 + Number(this.tax));
      let c_balance = Number(this.price)*(ratio*10);
      this.result = {
        value: this.methCeil(c_balance),
        meth1: Number(this.fee)+'%*2+'+Number(this.tax)+'%='+this.methCeil(ratio)+'%',
        meth2: Number(this.price)+'*1000*'+this.methCeil(ratio)+'/100='+this.methCeil(c_balance)
      }
      let e_balance = Number(this.price)*(Math.ceil(ratio*10));
      this.estimate = {
        value: this.methCeil(e_balance),
        meth1: Number(this.fee)+'%*2+'+Number(this.tax)+'%≒'+Math.ceil(ratio*10)/10+'%',
        meth2: Number(this.price)+'*1000*'+this.methCeil(Math.ceil(ratio*10)/10)+'/100≒'+this.methCeil(e_balance)
      }
    },
    methCeil: function(num){
      return Math.ceil(num*100)/100;
    }
  },
  created: function(){
    this.caculate();
  }
  
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js