Vue computed

by tingtinghsu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
<div id="app">
  {{ greeting() }}


  <div class="field is-horizontal">
    <div class="field-label is-normal">
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control">
          <input class="input" type="text" v-bind:placeholder="show_me_yourmoney" v-model="yourmoney">
        </p>
      </div>
    </div>
  </div>
  <button class="button is-primary is-light" @click="timesFive">加薪5倍！</button>
  <p>稅率：{{ taxrate }}。您總共要繳的所得稅：${{ tax }} </p>
</div>

JavaScript

new Vue({
  el: "#app",
  data: {
    show_me_yourmoney: "錢包裡有多少錢？",
    yourmoney: "",
    taxrate: 0.05
  },
  methods: {
    greeting() {
      return "這是鐵人賽第六天！"
    },
    timesFive() {
      this.yourmoney = this.yourmoney * 5
    }
  },
  computed: {
    tax() {
      return Math.round(this.yourmoney * this.taxrate)*100/100;
    }
  }
})